Vinculação em Massa de Classes CSS no Angular

Com a diretiva ngClass, você pode ativar e desativar um conjunto de classes CSS em uma tag de uma vez. A diretiva recebe como valor um objeto, cujas chaves serão as classes, e os valores - valores booleanos. A classe será ativada se seu valor for true, e desativada se for false.

Vamos ver na prática. Suponha que temos as seguintes classes:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Vamos ver com exemplos como ativar e desativar essas classes para um bloco.

Exemplo

Vamos ativar uma classe e desativar outra:

<div [ngClass]="{blue: true, bold: false}">
	texto
</div>

Exemplo

Suponha que os estados das classes estão armazenados nas propriedades da classe:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Vamos vincular a visibilidade da classe dependendo dos valores das nossas propriedades:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	texto
</div>

Exemplo

A propriedade pode ser um objeto inteiro com classes e estados:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Vamos vincular este objeto ao nosso bloco:

<div [ngClass]="styles">
	texto
</div>

Exemplo

Podemos obter os valores para o nosso objeto de outras propriedades da classe:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Vamos vincular este objeto ao nosso bloco:

<div [ngClass]="styles">
	texto
</div>

Tarefas Práticas

Crie duas classes CSS. Deixe uma delas definir o fundo do bloco, e a segunda - o tamanho da fonte.

Faça dois botões. Deixe o clique no primeiro botão alternar a primeira classe, e o clique no segundo - alternar a segunda classe.