Liaison massive de classes CSS dans Angular

Avec la directive ngClass, il est possible d'activer et de désactiver immédiatement un ensemble de classes CSS dans une balise. La directive prend comme valeur un objet, dont les clés seront les classes, et les valeurs - des valeurs booléennes. Une classe sera activée si sa valeur est définie à true, et désactivée si elle est à false.

Voyons cela en pratique. Supposons que nous ayons les classes suivantes :

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Voyons sur des exemples comment activer et désactiver ces classes pour un bloc.

Exemple

Activons une classe et désactivons l'autre :

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

Exemple

Supposons que les états des classes soient stockés dans des propriétés de la classe :

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

Liions la visibilité de la classe en fonction des valeurs de nos propriétés :

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

Exemple

Une propriété peut contenir un objet entier avec les classes et leurs états :

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

Lions cet objet à notre bloc :

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

Exemple

Il est possible d'obtenir les valeurs pour notre objet à partir d'autres propriétés de la classe :

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

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

Lions cet objet à notre bloc :

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

Tâches pratiques

Créez deux classes CSS. Laissez l'une d'elles définir l'arrière-plan du bloc, et la seconde - la taille de la police.

Créez deux boutons. Laissez un clic sur le premier bouton basculer la première classe, et un clic sur le second - basculer la seconde classe.