Binding delle classi CSS in Angular

In Angular è possibile attivare e disattivare l'applicazione di una classe CSS per un blocco. Questo viene fatto utilizzando un attributo del tag, scritto nel seguente formato:

[class.nome_classe]="true o false"

Vediamo in pratica. Supponiamo di avere le seguenti classi:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Vediamo con esempi come attivare e disattivare queste classi per un blocco.

Esempio

Attiviamo una classe e disattiviamone un'altra:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Esempio

Supponiamo che gli stati delle classi siano memorizzati nelle proprietà della classe:

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

Leghiamo la visibilità della classe in base ai valori delle nostre proprietà:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Compiti pratici

Data la seguente classe CSS:

.hidden {
	visibility: hidden;
}

Associa questa classe a un blocco. Crea un pulsante che, quando cliccato, farà scomparire o apparire il blocco.