17. Directives structurelles intégrées : *NgSwitch

*NgSwitch est le moyen utilisé par Angular pour implémenter un rendu conditionnel basé sur plusieurs valeurs potentielles, similaire à une instruction switch en JavaScript.

Elle supprime les éléments du DOM tout comme *NgIf.

Le trio de directives NgSwitch

1. [ngSwitch] : Appliquée à un élément conteneur. Définit l'expression dont la valeur sera évaluée.
2. *ngSwitchCase : Appliquée aux éléments à l'intérieur du conteneur. Rend l'élément si sa valeur correspond à l'expression [ngSwitch].
3. *ngSwitchDefault : Appliquée à un élément à l'intérieur du conteneur. Rend l'élément si aucune des conditions *ngSwitchCase n'est remplie.

Exemple de *NgSwitch

Classe du composant :

typescript export class NotificationComponent { userRole: string = 'admin'; // 'guest', 'user', ou 'admin'

promoteToAdmin() { this.userRole = 'admin'; } }

Template :

html <button (click)="promoteToAdmin()">Promouvoir

*NgSwitch est plus clair et souvent plus performant que le chaînage de plusieurs instructions *NgIf/else, surtout lors d'une comparaison par rapport à une variable unique.