*ngIf pour le contrôle de flux conditionnel basé sur un booléen

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.