Angular 2
Cómo usar ngif

Introducción

Sintaxis

• <div * ngIf = "false"> test </div> <! - se evalúa como falso ->
• <div * ngIf = "undefined"> test </div> <! - se evalúa como falso ->
• <div * ngIf = "null"> test </div> <! - se evalúa como falso ->
• <div * ngIf = "0"> prueba </div> <! - se evalúa como falso ->
• <div * ngIf = "NaN"> test </div> <! - se evalúa como falso ->
• <div * ngIf = ""> test </div> <! - se evalúa como falso ->
• Todos los demás valores se evalúan como verdaderos.

Mostrar un mensaje de carga

Si nuestro componente no está listo y está esperando datos del servidor, podemos agregar el cargador usando * ngIf. Pasos:

Primero declara un booleano:

loading: boolean = false;

A continuación, en su componente agregue un ngOnInit ciclo de vida llamado ngOnInit

ngOnInit() {
   this.loading = true;
}

y después de obtener datos completos del servidor, establezca que carga booleano en falso.

 this.loading=false; 

En su plantilla html use * ngIf con la propiedad de loading :

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

Mostrar mensaje de alerta en una condición

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

Para ejecutar una función al principio o al final de * ngFor loop Usando * ngIf

NgFor proporciona algunos valores que pueden ser asignados a las variables locales.

• índice : (variable) posición del elemento actual en el iterable que comienza en 0
• first - (boolean) true si el elemento actual es el primer elemento en el iterable
• last - (boolean) true si el elemento actual es el último elemento del iterable
• even - (boolean) true si el índice actual es un número par
• impar - (booleano) verdadero si el índice actual es un número impar

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

Use * ngIf con * ngFor

Si bien no se le permite usar *ngIf y *ngFor en el mismo div (dará un error en el tiempo de ejecución), puede anidar el *ngIf en el *ngFor para obtener el comportamiento deseado.

Ejemplo 1: sintaxis general

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

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

  </div>
</div>

Ejemplo 2: Mostrar elementos con índice par

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

La desventaja es que es necesario agregar un elemento div externo adicional.

Pero considere este caso de uso donde un elemento div necesita ser iterado (usando * ngFor) y también incluye una verificación de si el elemento necesita ser eliminado o no (usando * ngIf), pero no es preferible agregar un div adicional. En este caso, puede usar la etiqueta de template para el * ngFor:

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

De esta manera, no es necesario agregar un div externo adicional y, además, el elemento <template> no se agregará al DOM. Los únicos elementos agregados en el DOM del ejemplo anterior son los elementos div iterados.

Nota: En Angular v4 <template> ha sido desaprobado en favor de <ng-template> y se eliminará en v5. En Angular v2.x, las versiones <template> siguen siendo válidas.