La directive *ngIf est une autre directive structurelle dans Angular qui permet de conditionner l'affichage d'un élément HTML en fonction d'une expression booléenne. Voici comment vous pouvez l'utiliser :
Utilisation de *ngIf pour le contrôle de flux conditionnel basé sur la vérité
Supposons que vous ayez une variable isLoggedIn qui indique si l'utilisateur est connecté ou non. Vous pouvez utiliser *ngIf pour afficher un message différent en fonction de la valeur de isLoggedIn.
isLoggedIn = true;Et dans votre template HTML :
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back!
</div>
<ng-template #loggedOut>
Please log in.
</ng-template>Dans cet exemple, *ngIf est une directive qui définit une condition pour l'affichage de l'élément <div>. Si isLoggedIn est true, alors le <div> sera affiché. Sinon, le contenu de l'élément <ng-template> avec le nom #loggedOut sera affiché.
Notez que else est utilisé pour définir un bloc de code alternatif à afficher si la condition *ngIf est fausse. L'élément <ng-template> est utilisé pour définir ce bloc de code alternatif.