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 | <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!
