Como Adicionar Classe Através De Uma Validação No Angular

Diariamente no desenvolvimento de aplicações mais complexas, nos deparamos com situações em que devemos aplicar uma classe em um elemento HTML apenas se satisfazer determinada condição. Trabalhando com o Angular, por exemplo, podemos fazer isso de maneira muito simples, caso a condição seja algo do tipo if/else.

O Angular possui uma sintaxe de templates que é muito poderosa! Como por exemplo, podemos citar o ngFor, ngStyle e a que permite adicionar uma validação dentro de uma classe é o ngClass!

Para utilizar, vamos usar o seguinte cenário:

Queremos aplicar a cor vermelha caso a nota de um aluno seja menor que 6 e azul, caso seja maior que 6

Com isto em mente, logo pensamos em um if (nota < 6 ) {...} e podemos “traduzir” este pequeno trecho, diretamente no componente HTML, ficando da seguinte forma:

1
2
3
<p [ngClass]="{{nota < 6 ? red : blue}}">
{{nota}}
</p>

Com este operador ternário, ele adiciona uma classe de acordo com a validação, tornando muito mais fácil e rápido a adição de classes de acordo com sua validação!