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 </button>
<!-- Afficher le message de bienvenue uniquement si isLoggedIn est vrai --> <div *ngIf="isLoggedIn"> <h2>Bon retour, utilisateur !</h2> </div> <!-- Afficher l'invite de connexion uniquement si isLoggedIn est faux --> <div *ngIf="!isLoggedIn"> <p>Veuillez vous connecter pour continuer.</p> </div>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
<div *ngIf="isLoggedIn; else loadingOrError"> Contenu chargé avec succès. </div> <!-- ng-template est rendu UNIQUEMENT si isLoggedIn est faux --><ng-template #loadingOrError>
<p>Chargement ou échec de l'authentification...</p> </ng-template>Note : <ng-template> lui-même n'est jamais rendu directement; c'est un moyen de regrouper du contenu qu'Angular utilise par programmation.