Angular : comment utiliser ngIf else ?
Depuis sa version 4, le framework AngularJS fournit l'instruction "*ngIf else" afin d'écrire des templates s'affichant sous forme de conditions, le tout en utilisant uniquement le langage HTML. C'est le code JavaScript du framework qui va se charger d'effectuer les tests et d'afficher le bon template. Voici les techniques pour utiliser ces instructions.
Pour exécuter les conditions, Angular utilise tout d'abord une balise <div>. C'est cette balise qui va contenir en attribut le test de la condition. La deuxième balise utilisée est la balise <ng-template>. Il s'agit de l'implémation d'Angular pour la balise HTML <template>. La forme la plus simple consiste à placer l'attribut "*ngIf " dans la balise <div> en n'ayant aucun contenu et le contenu à afficher en cas de test réussi dans la balise <ng-template>. Cette dernière aura comme attribut le caractère "#" suivi de son identifiant.
<div *ngIf="condition_est_remplie;then contenu"></div> <ng-template #contenu>Le contenu stocké ici s'affichera uniquement si la condition est remplie.</ng-template>
On peut également utiliser le mot-clé "else" pour définir un template qui s'affichera si la condition n'est pas remplie. Dans ce cas, il faudra une deuxième balise <ng-template>. Les éléments contenus dans la balise <div> ne seront alors jamais affichés.
<div *ngIf="condition_est_remplie;then contenu_bon else contenu_pas_bon">Le contenu saisi ici sera ignoré.</div> <ng-template #contenu_bon>Le contenu stocké ici s'affichera uniquement si la condition est remplie.</ng-template> <ng-template #contenu_pas_bon>Le contenu stocké ici s'affichera uniquement si la condition n'est pas remplie.</ng-template>
Il est possible de raccourcir cette notation. Dans l'attribut "*ngIf", il suffit d'enlever l'instruction "then". Les éléments affichés si la condition est remplie seront alors à stocker directement dans la balise <div>. Il ne restera qu'une balise <ng-template> qui contiendra les éléments à afficher dans le cas où la condition n'est pas remplie.
<div *ngIf="condition_est_remplie;else contenu_pas_bon">Le contenu stocké ici s'affichera uniquement si la condition est remplie.</div> <ng-template #contenu_pas_bon> Le contenu stocké ici s'affichera uniquement si la condition n'est pas remplie.</ng-template>