JavaScript para Iniciantes: Atribuindo Classes Dinâmicas com ngClass

Em aplicativos web, é um requisito comum personalizar a aparência de um elemento com base em uma condição. Existem algumas maneiras de realizar isso, mas se você está trabalhando com Angular, sua escolha é clara. A diretiva ngClass oferece uma infinidade de maneiras de atribuir dinamicamente nomes de classes a elementos ou componentes. Sua sintaxe é concisa e ainda suporta lógica bastante complexa para nos fornecer controle detalhado sobre nossos nomes de classes, bem como os critérios para defini-los. Neste tutorial, abordaremos algumas das maneiras mais comuns de atribuir dinamicamente uma classe CSS a um elemento usando a diretiva ngClass.

Atribuindo uma Classe CSS Usando a Ligação de Propriedade [className]

Embora este artigo seja sobre a diretiva ngClass, vale ressaltar que, em muitos casos, você nem precisará dela! Graças à ligação de propriedade [className], podemos definir uma classe por meio da propriedade nativa className do JavaScript, usando a sintaxe de ligação []. Podemos executar qualquer declaração dentro dessa ligação que resulte em uma string. Isso nos permite definir uma ou mais classes com base em uma condição:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

Também poderíamos construir o nome da classe em tempo de execução:

<div [className]="'class' + someValue"></div>

Leia: 5 Conceitos de JavaScript Que Todo Desenvolvedor Web Deve Aprender

Alternando Classes via Ligação de Propriedade [className]

Alguns consideram a técnica de alternância de classes acima um pouco mais complicada do que precisa ser, já que a inactive-class provavelmente seria a padrão. Se você se enquadra nesse grupo, pode empregar a sintaxe [class.class-name] para fornecer uma condição a ser avaliada:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Então, se podemos definir condicionalmente uma classe usando o Binding de Propriedade [className], por que precisamos mesmo da diretiva ngClass? Como veremos, a verdadeira razão para usar a diretiva ngClass é que ela pode nos ajudar a escolher entre várias classes.

Uma Profundidade na Diretiva ngClass

Antes de entrarmos em como usar a diretiva ngClass, seria instrutivo olhar para a sua definição:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Olhando para o código acima, agora podemos ver que a sintaxe [class] que foi usada anteriormente na verdade faz parte da diretiva ngClass, via @Input('class'). Note também que a diretiva ngClass nos dá nada menos que quatro opções para definir classes dinâmicas! 

Vamos analisar cada uma delas com mais detalhes.

Fornecendo uma string ou string[]

Atribuir uma string ou um array de strings ao ngClass nos permite vincular classes dinâmicas às variáveis do Angular. Suponha que tivéssemos uma variável chamada activeClass. Dentro do nosso arquivo .ts, podemos definir um nome de classe conhecido como "text-success" ou "text-failure" com base no resultado de alguma operação:

<div 
  [ngClass]="activeClass">
</div>

A sintaxe de array é útil para aplicar várias classes ao mesmo elemento ou componente:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Usando uma Expressão Avaliada

Um método ligeiramente mais avançado – porém altamente útil – de usar ngClass é fornecer uma expressão. A classe fornecida é aplicada somente se uma variável ou expressão avaliar como true. Para fornecer uma expressão, você deve fornecer um objeto usando chaves {}. À esquerda de cada dois pontos – o nome da propriedade – está a classe que será aplicada; à direita – o valor da propriedade – está a expressão ou variável que você deseja que seja avaliada. Aqui está um exemplo:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Leia: React, Angular e Vue.js: Qual a Diferença Técnica?

Usando o Operador Ternário

O operador ternário permite atribuir um valor a uma variável com base em uma expressão booleana – seja um campo booleano, ou uma declaração que avalia como um resultado booleano. No seu mais básico, o operador ternário, também conhecido como operador condicional, pode ser usado como uma alternativa à declaração if/then/else ao definir uma variável.

Fornecer o operador ternário para ngClass nos permite especificar duas classes diferentes: uma se uma expressão for verdadeira e outra para falsa. Aqui está a sintaxe básica para o operador ternário:

[ngClass]="expression or variable ? true class : false class"

Aqui está um código que emprega o operador ternário para definir a classe de um DIV dependendo se duas variáveis são iguais ou não:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

A Assinatura do Set<string> ngClass: Não Desejado e Não Amado

Set é uma nova estrutura de dados introduzida no ES6, semelhante ao Map. Um Set em typescript nos permite armazenar valores distintos em uma Lista usando métodos como add(), has() e delete(). Por algum motivo, a assinatura Set<string> ngClass nunca realmente pegou. Eu nunca usei, nem conheço alguém que tenha. 

Dito isso, o Set deve conter strings representando nomes de classes a serem aplicadas ao elemento ou componente. Aqui está um código typescript que cria um Set  chamado classes:

//Declare uma variável membro da classe
public classes = new Set();
 
//Adicione nomes de classe
classes.add('active').add('text-large');

Conclusão

Neste tutorial, passamos por algumas das maneiras mais comuns de atribuir dinamicamente uma classe CSS a um elemento usando a diretiva ngClass. Como você pode ver, é algo bastante poderoso.