Angular 2
Come usare ngif

introduzione

Sintassi

• <div * ngIf = "false"> test </ div> <! - restituisce false ->
• <div * ngIf = "undefined"> test </ div> <! - restituisce false ->
• <div * ngIf = "null"> test </ div> <! - restituisce false ->
• <div * ngIf = "0"> test </ div> <! - restituisce false ->
• <div * ngIf = "NaN"> test </ div> <! - restituisce false ->
• <div * ngIf = ""> test </ div> <! - restituisce false ->
• Tutti gli altri valori sono valutati come veri.

Mostra un messaggio di caricamento

Se il nostro componente non è pronto e in attesa di dati dal server, possiamo aggiungere il caricatore usando * ngIf. passi:

Prima dichiara un booleano:

loading: boolean = false;

Successivamente, nel componente aggiungi un hook per il ciclo di vita chiamato ngOnInit

ngOnInit() {
   this.loading = true;
}

e dopo aver ottenuto i dati completi dal set di server, si carica booleano su falso.

 this.loading=false; 

Nel tuo template html usa * ngIf con la proprietà di loading :

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

Mostra messaggio di avviso a una condizione

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

Per eseguire una funzione all'inizio o alla fine del ciclo * ngFor utilizzando * ngIf

NgFor fornisce alcuni valori che possono essere alterati a variabili locali

• index - (variabile) posizione dell'elemento corrente nel iterabile a partire da 0
• first - (boolean) true se l'elemento corrente è il primo elemento nel iterable
• last - (boolean) true se l'elemento corrente è l'ultimo elemento nel iterable
• even - (booleano) true se l'indice corrente è un numero pari
• dispari - (booleano) vero se l'indice corrente è un numero dispari

<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>

Usa * ngIf con * ngFor

Mentre non ti è permesso usare *ngIf e *ngFor nello stesso div (darà un errore nel runtime) puoi nidificare *ngIf in *ngFor per ottenere il comportamento desiderato.

Esempio 1: sintassi generale

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

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

  </div>
</div>

Esempio 2: Visualizza elementi con indice pari

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

Lo svantaggio è che è necessario aggiungere un ulteriore elemento div esterno.

Considerate questo caso d'uso in cui un elemento div deve essere iterato (usando * ngFor) e include anche un controllo se l'elemento deve essere rimosso o meno (usando * ngIf), ma non è preferibile aggiungere un div aggiuntivo. In questo caso puoi usare il tag template per * ngFor:

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

In questo modo non è necessario aggiungere un div esterno aggiuntivo e inoltre l'elemento <template> non verrà aggiunto al DOM. Gli unici elementi aggiunti nel DOM dell'esempio precedente sono gli elementi div iterati.

Nota: in Angular v4 <template> è stato deprecato a favore di <ng-template> e verrà rimosso nella v5. Nelle versioni di Angular v2.x <template> è ancora valido.