Três formas de atribuir classes no angular utilizando ngClass

MariBelniok — Sat, 19 Mar 2022 14:34:20 +0000

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

DEV Community: MariBelniok

Três formas de atribuir classes no angular utilizando ngClass

Utilizando javascript puramente, fariamos da seguinte forma:

Utilizando operador ternário, poderiamos fazer da seguinte forma:

Ou ainda, poderiamos fazer utilizando [class.class-name]:

E também existe uma terceira opção que seria utilizar um objeto dentro do ngClass: