Modification dynamique des styles dans Angular

Avec les directives ngClass et ngStyle, il est possible de lier des expressions aux éléments, permettant ainsi à nos styles de changer dynamiquement.

Faisons en sorte que le texte soit masqué ou affiché à l'aide de la propriété active de la classe du composant :

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Pour cela, écrivons la fonction toggle, qui activera ou désactivera alternativement cette propriété :

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Dans le fichier CSS du composant, définissons le style suivant pour la classe :

.hidden {
	display: none;
}

Dans le template du composant, créons une div, et ajoutons-lui la classe CSS hidden, qui s'activera ou se désactivera en fonction de la propriété active de la classe du composant :

<div [ngClass]="{hidden: active}">
	text
</div>

Créons également un bouton sur lequel un clic appellera la méthode toggle, affichant ou masquant notre composant :

<button (click)="toggle()">
	toggle
</button>

Trois blocs sont donnés. Créez trois boutons, chacun devant activer/désactiver son bloc correspondant.