Angular - 2.22- Utilisation de ngIf pour sortir des données de manière conditionnelle

*ngIf est une directive structurelle qui permet d'afficher un élément du template uniquement si une condition est vraie. C'est la directive de base pour gérer l'affichage conditionnel en Angular, et l'une des plus utilisées au quotidien.

Sa syntaxe est très lisible : on l'applique à un élément HTML avec un astérisque suivi de l'expression à tester. Par exemple, <p *ngIf="serverCreated">Le serveur a été créé</p> affichera ce paragraphe uniquement si la propriété serverCreated du composant vaut true.

Caractéristiques importantes

• L'astérisque * indique qu'il s'agit d'une directive structurelle : Angular réécrit la balise en interne sous forme de <ng-template>.
• Si la condition est fausse, l'élément n'est pas dans le DOM du tout — il n'est pas simplement caché avec du CSS (display: none). Sa structure HTML disparaît.
• Quand la condition devient vraie, l'élément est créé et inséré dans le DOM ; quand elle redevient fausse, il est détruit.
• Cette suppression réelle a un impact en performance et sur les composants enfants (constructeur appelé à chaque ré-affichage).

L'expression entre guillemets peut être n'importe quelle expression TypeScript retournant un booléen : une simple propriété (isLoggedIn), une comparaison (users.length > 0), une négation (!isLoading), ou un appel à une méthode du composant (canSee()). Comme pour les autres bindings, on évite d'y mettre des fonctions à effets de bord, car l'expression est ré-évaluée à chaque cycle de change detection.

Dans la prochaine leçon, nous verrons comment enrichir *ngIf avec une branche else, qui permet d'afficher un contenu alternatif quand la condition est fausse. Cela évite de devoir écrire deux *ngIf avec des conditions opposées sur deux blocs distincts.