Angular 2
ngifの使い方

前書き

構文

• <div * ngIf = "false">テスト</ div> <！ - falseに評価する - >
• <div * ngIf = "undefined">テスト</ div> <！ - falseに評価する - >
• <div * ngIf = "null">テスト</ div> <！ - falseと評価されます - >
• <div * ngIf = "0">テスト</ div> <！ - falseに評価する - >
• <div * ngIf = "NaN">テスト</ div> <！ - falseに評価する - >
• <div * ngIf = "">テスト</ div> <！ - falseと評価されます - >
• その他の値はすべてtrueと評価されます。

読み込みメッセージを表示する

私たちのコンポーネントが準備ができておらず、サーバーからのデータを待っているなら、* ngIfを使ってローダーを追加できます。 ステップ：

最初にブール値を宣言します：

loading: boolean = false;

次に、コンポーネントに、 ngOnInitというライフサイクルフックを追加します

ngOnInit() {
   this.loading = true;
}

サーバーから完全なデータを取得した後、ブール値をfalseに設定します。

 this.loading=false; 

HTMLテンプレートでは、* ngIfをloadingプロパティで使用します。

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

条件に関する警告メッセージを表示する

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

* ngForループの開始時または終了時に関数を実行する* ngIfを使用する

NgForは、ローカル変数にエイリアスできるいくつかの値を提供します

• index - 0から始まるイテラブル内の現在のアイテムの位置（可変）
• first - （ブール値）現在の項目がiterableの最初の項目である場合はtrue
• last - （ブール値）現在の項目が反復可能な項目の最後の項目である場合はtrue
• even - （boolean）現在のインデックスが偶数の場合はtrue
• odd - （boolean）現在のインデックスが奇数の場合はtrue

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

* ngIfで* ngIfを使用

同じdivで*ngIfと*ngForを使用することはできませんが（実行時にエラーが発生します）、 *ngIfに*ngForを*ngForして、目的の動作を得ることができます。

例1：一般的な構文

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

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

  </div>
</div>

例2：偶数インデックスの要素を表示する

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

欠点は、追加の外部div要素を追加する必要があることです。

しかし 、 div要素を（* ngForを使用して）反復する必要があり、要素を削除する必要があるかどうか（* ngIfを使用するかどうか）をチェックする追加のdiv追加することは好ましくありません。この場合、* ngForにtemplateタグを使用することができます：

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

この方法では、追加の外部div追加する必要はなく、さらに<template>要素はDOMに追加されません。上の例からDOMに追加された唯一の要素は反復div要素です。

注：Angular v4では、 <template>は<ng-template>が非難され、v5では削除されます。 Angular v2.xのリリースでは、 <template>は有効です。