Exemplo de uso da diretiva ngClass do angular

Este post mostra alguns exemplos de uso do NgClass do Angular

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Angular - TUTORIAL

Última atualização em: | 36022 Visualizações

O que é ngClass

O ngClass do angular é uma diretiva que permite definir uma classe dinâmicamente a partir do DOM de um elemento.

Como utilizar ngClass

Para utilizar a diretiva ngClass você poderá optar por duas maneiras: Passando um objeto literal para a diretiva ou fazendo o uso de uma expressão.


Usando ngClass com objeto literal

Veja o exemplo:

<div [ngClass]="{'text-success':true}"></div>

Note que dessa forme será adicionado a classe text-success a div.

Este é um exemplo de uso do ngClass de forma literal. Mas ainda pode adicionar um objeto criado em seu componente, veja:

test.component.ts
[...]
	classToDiv = {};
	
	constructor() {
		this.classToDiv = {
			'text-success': true
		};
	}

[...]

Logo após basta utilizar no HTML:

test.component.html
<div [ngClass]="classToDiv"></div>

Ao usar um literal de objeto, as chaves são as classes que são adicionadas ao elemento se o valor da chave for avaliado como verdadeiro.

Usando ngClass com expressão

Para utilizar o ngClass com expressão basta informar no lugar de true uma expressão que retorne um valor boleano, veja:

<div [ngClass]="{'text-success':country === 'BR'}"></div>

Note que caso o valor retorne verdadeiro será adicionada a classe ao elemento.

Alternativa ao ngClass

Ainda é possível utilizar apenas o class da seguinte forma:

<div [class.text-success]="true"></div>

ou:

<div [class.text-success]="{country === 'BR'}"></div>

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!