15. Directives structurelles intégrées : *NgIf

Les directives structurelles sont responsables du modelage ou du remodelage de la structure du DOM, généralement en ajoutant, supprimant ou manipulant des éléments. Elles sont toujours préfixées par un astérisque (*).

La directive *NgIf

*NgIf ajoute ou supprime conditionnellement un élément et son sous-arbre du DOM en fonction d'une expression booléenne.

Important : *NgIf ne se contente pas de masquer l'élément (comme le ferait CSS display: none); il supprime physiquement l'élément du DOM, économisant des ressources et évitant potentiellement des erreurs.

Rendu conditionnel simple

Classe du composant :

typescript export class AuthComponent { isLoggedIn: boolean = false; }

Template :

html <button (click)="isLoggedIn = !isLoggedIn"> Basculer l'état de connexion

Utiliser *NgIf avec else (Ng-Template)

Angular propose un mécanisme pour spécifier un template alternatif lorsque la condition principale est fausse, en utilisant le mot-clé else et l'élément <ng-template>.

html

<ng-template #loadingOrError>

Chargement ou échec de l'authentification...

Note : <ng-template> lui-même n'est jamais rendu directement; c'est un moyen de regrouper du contenu qu'Angular utilise par programmation.