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 :

app/app.component.tsexport 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é :

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

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

app/app.component.css.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 :

app/app.component.html<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 :

app/app.component.html<button (click)="toggle()">
  toggle
</button>