Angular - 2.23-Améliorer le ngIf avec une condition Else

La directive *ngIf permet d'afficher un élément si une condition est vraie. Mais comment afficher un contenu alternatif si la condition est fausse ? Angular propose une syntaxe élégante : la clause else associée à un ng-template.

Syntaxe avec else

• Ajouter else nomDuTemplate à la directive : *ngIf="serverCreated; else noServer".
• Déclarer un <ng-template #noServer>...</ng-template> avec le contenu alternatif.
• La variable de référence #noServer est ce qui permet à Angular de retrouver le template à utiliser.

Exemple complet : <p *ngIf="serverCreated; else noServer">Le serveur a été créé !</p> suivi de <ng-template #noServer><p>Aucun serveur n'a encore été créé</p></ng-template>. Angular affichera le premier paragraphe si serverCreated est vrai, et le contenu du ng-template sinon.

Le <ng-template> est un élément spécial d'Angular qui ne génère aucun HTML par défaut. C'est en quelque sorte un « patron » qu'Angular peut instancier à la demande, ici quand la condition du *ngIf bascule à false. C'est exactement le même mécanisme qu'utilise *ngIf en interne pour le bloc principal (l'astérisque est un sucre syntaxique pour un ng-template implicite).

Cette forme évite d'écrire deux *ngIf avec des conditions opposées (*ngIf="x" sur un bloc et *ngIf="!x" sur l'autre), ce qui serait moins lisible et plus difficile à maintenir si la condition se complexifie. Avec else, l'intention « si oui A, sinon B » est exprimée en un seul endroit.