Exemplo de uso da diretiva ngClass do angular
Este post mostra alguns exemplos de uso do NgClass do Angular
Última atualização em: | 37303 Visualizações
O que é ngClass
O ngClass
do angular é uma diretiva que permite definir uma classe dinâmicamente a partir do DOM de um elemento.
Como utilizar ngClass
Para utilizar a diretiva ngClass
você poderá optar por duas maneiras: Passando um objeto literal para a diretiva ou fazendo o uso de uma expressão.
Usando ngClass
com objeto literal
Veja o exemplo:
<div [ngClass]="{'text-success':true}"></div>
Note que dessa forme será adicionado a classe
text-success
adiv
.
Este é um exemplo de uso do ngClass
de forma literal. Mas ainda pode adicionar um objeto criado em seu componente, veja:
test.component.ts
[...]
classToDiv = {};
constructor() {
this.classToDiv = {
'text-success': true
};
}
[...]
Logo após basta utilizar no HTML:
test.component.html
<div [ngClass]="classToDiv"></div>
Ao usar um literal de objeto, as chaves são as classes que são adicionadas ao elemento se o valor da chave for avaliado como verdadeiro.
Usando ngClass
com expressão
Para utilizar o ngClass
com expressão basta informar no lugar de true
uma expressão que retorne um valor boleano, veja:
<div [ngClass]="{'text-success':country === 'BR'}"></div>
Note que caso o valor retorne verdadeiro será adicionada a classe ao elemento.
Alternativa ao ngClass
Ainda é possível utilizar apenas o class
da seguinte forma:
<div [class.text-success]="true"></div>
ou:
<div [class.text-success]="{country === 'BR'}"></div>
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.