Angular 2
Hoe ngif te gebruiken

Invoering

Syntaxis

• <div * ngIf = "false"> test </div> <! - evalueert naar false ->
• <div * ngIf = "undefined"> test </div> <! - evalueert naar false ->
• <div * ngIf = "null"> test </div> <! - evalueert naar false ->
• <div * ngIf = "0"> test </div> <! - evalueert naar false ->
• <div * ngIf = "NaN"> test </div> <! - evalueert naar false ->
• <div * ngIf = ""> test </div> <! - evalueert naar false ->
• Alle andere waarden worden als waar geëvalueerd.

Geef een laadbericht weer

Als onze component niet gereed is en wacht op gegevens van de server, kunnen we lader toevoegen met * ngIf. Stappen:

Verklaar eerst een Boolean:

loading: boolean = false;

Voeg vervolgens in uw component een levenscyclushaak met de naam ngOnInit

ngOnInit() {
   this.loading = true;
}

en nadat je volledige gegevens van de server hebt gekregen, laad je boolean naar false.

 this.loading=false; 

Gebruik in uw html-sjabloon * ngIf met de eigenschap loading :

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

Toon waarschuwingsbericht op voorwaarde

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

Een functie uitvoeren aan het begin of einde van * ngFor-lus * ngIf gebruiken

NgFor biedt enkele waarden die kunnen worden gekoppeld aan lokale variabelen

• index - (variabele) positie van het huidige item in de iterabele vanaf 0
• first - (boolean) true als het huidige item het eerste item in de iterabele is
• last - (boolean) true als het huidige item het laatste item in de iterable is
• even - (boolean) true als de huidige index een even getal is
• oneven - (boolean) waar als de huidige index een oneven getal is

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

Gebruik * ngIf met * ngFor

Hoewel het niet is toegestaan om *ngIf en *ngFor in dezelfde div (het geeft een fout in de runtime), kun je de *ngIf in de *ngFor om het gewenste gedrag te krijgen.

Voorbeeld 1: algemene syntaxis

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

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

  </div>
</div>

Voorbeeld 2: elementen weergeven met even index

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

Het nadeel is dat een extra buitenste div element moet worden toegevoegd.

Maar overweeg dit gebruik waarbij een div element moet worden herhaald (met * ngFor) en bevat ook een controle of het element moet worden verwijderd of niet (met * ngIf), maar het toevoegen van een extra div heeft niet de voorkeur. In dit geval kunt u de template gebruiken voor de * ngFor:

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

Op deze manier is het toevoegen van een extra buitenste div niet nodig en bovendien wordt het element <template> niet toegevoegd aan de DOM. De enige elementen die in het DOM uit het bovenstaande voorbeeld zijn toegevoegd, zijn de herhaalde div elementen.

Opmerking: in Angular v4 is <template> verouderd ten gunste van <ng-template> en wordt verwijderd in v5. In Angular v2.x releases is <template> nog steeds geldig.