Trs formas de atribuir classes no angular utilizando ngClass

O ngClass serve para que seja possvel adicionar ou remover classes a um elemento HTML.

Essa diretiva ajuda muito, principalmente quando queremos adicionar ou remover uma classe devida a certa expresso ser verdadeira ou falsa.

Suponha que queremos adicionar cores diferentes a um paragrafo, caso um usurio esteja ativo ou no.

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 lgica, pelo prprio template.

Digamos que no nosso componente temos uma varivel chamada active que um boolean, ento no template podemos utiliza-la dentro do ngClass para adicionar a classe com base no valor dessa varivel.

Utilizando operador ternrio, 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 tambm existe uma terceira opo que seria utilizar um objeto dentro do ngClass:

<p [class]="{'active': active, 'inactive': !active}">    Hello World</p>

Minha opo favorita utilizar o [class.class-name], dessa forma acredito que o template fica mais limpo e de fcil leitura

Deixei alguns exemplos simples no stackblitz: https://stackblitz.com/edit/angular-ivy-dmfbw2