Angular 2
Comment utiliser ngif

Introduction

Syntaxe

• <div * ngIf = "false"> test </ div> <! - évalue à false ->
• <div * ngIf = "undefined"> test </ div> <! - évalue à false ->
• <div * ngIf = "null"> test </ div> <! - évalue à false ->
• <div * ngIf = "0"> test </ div> <! - évalue à false ->
• <div * ngIf = "NaN"> test </ div> <! - évalue à false ->
• <div * ngIf = ""> test </ div> <! - évalue à false ->
• Toutes les autres valeurs ont la valeur true.

Afficher un message de chargement

Si notre composant n'est pas prêt et attend des données du serveur, alors nous pouvons ajouter le chargeur en utilisant * ngIf. Pas:

Commencez par déclarer un booléen:

loading: boolean = false;

Ensuite, dans votre composant, ajoutez un crochet de cycle de vie appelé ngOnInit

ngOnInit() {
   this.loading = true;
}

et après avoir obtenu des données complètes du serveur, définissez la valeur booléenne sur false.

 this.loading=false; 

Dans votre modèle HTML, utilisez * ngIf avec la propriété de loading :

<div *ngIf="loading" class="progress">
   <div class="progress-bar info" style="width: 125%;"></div>
</div>

Afficher le message d'alerte à condition

<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

Pour exécuter une fonction au début ou à la fin de * ngFor loop using * ngIf

NgFor fournit des valeurs pouvant être associées à des variables locales

• index - (variable) position de l'élément courant dans l'itérable à partir de 0
• first - (booléen) true si l'élément en cours est le premier élément de l'itérable
• last - (boolean) true si l'élément en cours est le dernier élément de l'itérable
• even - (booléen) true si l'index actuel est un nombre pair
• odd - (boolean) true si l'index actuel est un nombre impair

<div *ngFor="let note of csvdata; let i=index; let lastcall=last">
      <h3>{{i}}</h3> <-- to show index position
      <h3>{{note}}</h3>
      <span *ngIf="lastcall">{{anyfunction()}} </span><-- this lastcall boolean value will be true only if this is last in loop
      // anyfunction() will run at the end of loop same way we can do at start
    </div>

Utilisez * ngIf avec * ngFor

Bien que vous ne soyez pas autorisé à utiliser *ngIf et *ngFor dans le même div (cela donnera une erreur dans le runtime), vous pouvez imbriquer le *ngIf dans le *ngFor pour obtenir le comportement souhaité.

Exemple 1: syntaxe générale

<div *ngFor="let item of items; let i = index">
  <div *ngIf="<your condition here>">

   <!-- Execute code here if statement true -->

  </div>
</div>

Exemple 2: éléments d'affichage avec index pair

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 2 == 0">
    {{ item }}
  </div>
</div>

L'inconvénient est qu'un élément div supplémentaire doit être ajouté.

Mais considérez ce cas d'utilisation où un élément div doit être itéré (en utilisant * ngFor) et inclut également une vérification pour savoir si l'élément doit être supprimé ou non (en utilisant * ngIf), mais ajouter un div supplémentaire n'est pas préféré. Dans ce cas, vous pouvez utiliser la balise template pour * ngFor:

<template ngFor let-item [ngForOf]="items">
    <div *ngIf="item.price > 100">
    </div>
</template>

De cette façon, l'ajout d'un div externe supplémentaire n'est pas nécessaire et l'élément <template> ne sera pas ajouté au DOM. Les seuls éléments ajoutés dans le DOM à partir de l'exemple ci-dessus sont les éléments div itérés.

Remarque: Dans Angular v4, <template> est devenu obsolète en faveur de <ng-template> et sera supprimé dans la version 5. Dans Angular v2.x, les versions <template> sont toujours valides.