JavaScript para Iniciantes: Atribuindo Classes Dinâmicas com ngClass

Em aplicativos web, é uma exigência comum adaptar a aparência de um elemento com base em uma condição. Existem algumas maneiras de realizar isso, mas se você estiver 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, ao mesmo tempo, suporta uma lógica bastante complexa para nos proporcionar um controle detalhado tanto sobre nossos nomes de classes quanto sobre os critérios para defini-los. Neste tutorial, vamos abordar algumas das maneiras mais comuns de atribuir dinamicamente uma classe CSS a um elemento usando a diretiva ngClass.

Atribuindo uma Classe CSS Usando o [className] Binding de Propriedade

Embora este artigo trate da diretiva ngClass, vale a pena notar que, em muitos casos, você nem precisará dela! Graças ao binding de propriedade [className], podemos definir uma classe por meio da propriedade className do JavaScript nativo, usando a sintaxe de binding []. Podemos executar qualquer instrução dentro desse binding 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

Alternância de Classe via [className] Binding de Propriedade

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 identifica com esse 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 Vínculo de Propriedade [className], por que precisamos 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 usamos anteriormente faz parte da diretiva ngClass, via @Input('class'). Também observe 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 array de strings ao ngClass nos permite vincular classes dinâmicas a 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 – mas altamente útil – de usar ngClass é fornecer uma expressão. A classe fornecida é aplicada apenas se uma variável ou expressão avaliar para verdadeiro. 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 para um resultado booleano. Em sua forma mais básica, 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 se for 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 utiliza o operador ternário para definir a classe de um DIV dependendo se duas variáveis são iguais:

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

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

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

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

//Declarar uma variável membro de Classe
public classes = new Set();
 
//Adicionar nomes de classes
classes.add('active').add('text-large');

Conclusão

Neste tutorial, abordamos 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.