Binding di Massa delle Classi CSS in Angular

Con la direttiva ngClass è possibile attivare e disattivare un intero insieme di classi CSS su un tag. La direttiva accetta come valore un oggetto, le cui chiavi sono le classi, e i cui valori sono valori booleani. La classe sarà attivata se per essa è impostato il valore true, e disattivata se false.

Vediamo nella pratica. Supponiamo di avere le seguenti classi:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

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

Esempio

Attiviamo una classe e disattiviamone un'altra:

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

Esempio

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

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

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

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

Esempio

In una proprietà può esserci un intero oggetto con classi e stati:

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

Colleghiamo questo oggetto al nostro blocco:

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

Esempio

È possibile ottenere i valori per il nostro oggetto da altre proprietà della classe:

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

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

Colleghiamo questo oggetto al nostro blocco:

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

Compiti Pratici

Create due classi CSS. Che una di esse definisca lo sfondo del blocco, e la seconda la dimensione del font.

Create due pulsanti. Che la pressione del primo pulsante attivi/disattivi la prima classe, e la pressione del secondo - attivi/disattivi la seconda classe.