O ngClass serve para que seja possível adicionar ou remover classes a um elemento HTML.
Essa diretiva ajuda muito, principalmente quando queremos adicionar ou remover uma classe devida a certa expressão ser verdadeira ou falsa.
Suponha que queremos adicionar cores diferentes a um paragrafo, caso um usuário esteja ativo ou não.
Utilizando javascript puramente, fariamos da seguinte forma:
const element = document.querySelector('div');
if (active) {
element.classList.add("active");
} else {
element.classList.add("inactive")
}
Com o ngClass do angular, podemos fazer essa mesma lógica, pelo próprio template.
Digamos que no nosso componente temos uma variável chamada ‘active’ que é um boolean, então no template podemos utiliza-la dentro do ngClass para adicionar a classe com base no valor dessa variável.
Utilizando operador ternário, poderiamos fazer da seguinte forma:
<p [class]="active ? 'active' : 'inactive'">
Hello World
</p>
Ou ainda, poderiamos fazer utilizando [class.class-name]:
<p [class.active]="active" [class.inactive]="!active">
Hello World
</p>
E também existe uma terceira opção que seria utilizar um objeto dentro do ngClass:
<p [class]="{'active': active, 'inactive': !active}">
Hello World
</p>
Minha opção favorita é utilizar o [class.class-name], dessa forma acredito que o template fica mais limpo e de fácil leitura 😃
Deixei alguns exemplos simples no stackblitz: https://stackblitz.com/edit/angular-ivy-dmfbw2
Top comments (0)