Angular ngFor、ngIf、ngSwitch、ng-template

今回は ngFor、ngIf、ngSwitch、ng-template を使ってみます。

Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。

サンプルソース

app.component.ts

				
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
    `
    <input #hello (keyup)="update(hello.value)" placeholder="メソッドの引数" />
    <h1>{{hello.value}}</h1>
  
    <h1 *ngIf="hello.value == 'a'">ngIf</h1>
  
    <div [ngSwitch]="hello.value">
      <h1 *ngSwitchCase="'aa'"> 
        ngSwitchCase1
      </h1>
      <h1 *ngSwitchCase="'aaa'"> 
        ngSwitchCase2  
      </h1>
      <h1 *ngSwitchDefault> 
        default  
      </h1>
    </div>
  
    <ul>
      <li *ngFor="let str of strs; index as i; first as isFirst ; even as isEven"> 
        *ngFor - {{ i }} - {{ str }} - 最初：{{ isFirst }} - 偶数：{{ isEven }}
      </li>
    </ul>
 
    <ng-template [ngIf]="bbb">ng-template ngIf</ng-template>

    <ng-template ngFor let-str [ngForOf]="strs" let-i="index" let-isLast="last" let-isOdd="odd">
      <div>
        ng-template - ngFor - {{ i }} - {{ str }} - 最後：{{ isLast }} - 奇数：{{ isOdd }}
      </div>
    </ng-template>
    `
})
export class AppComponent {
  bbb = false;
  strs: String[] = ["aryA", "aryB", "aryC", "aryD"];
  update(val: string) {
    this.bbb = val == "aaaa";
  }
}

実行イメージ

ngFor

テンプレート(HTML)内でループを行う場合、ngForを使います。

				
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
    `  
    <ul>
      <li *ngFor="let str of strs; index as i; first as isFirst ; even as isEven"> 
        *ngFor - {{ i }} - {{ str }} - 最初：{{ isFirst }} - 偶数：{{ isEven }}
      </li>
    </ul>
 
    <ng-template ngFor let-str [ngForOf]="strs" let-i="index" let-isLast="last" let-isOdd="odd">
      <div>
        ng-template - ngFor - {{ i }} - {{ str }} - 最後：{{ isLast }} - 奇数：{{ isOdd }}
      </div>
    </ng-template>
    `
})
export class AppComponent {
  strs: String[] = ["aryA", "aryB", "aryC", "aryD"];
}

ダブルクォーテーションの外で変数を使う場合、let-(ハイフン)を付けます。
letはvarと同じように変数定義時に使用するもので、varは再宣言しても良くて、letは再宣言できません。

ngIf

テンプレート(HTML)内でIF分岐を行う場合、ngIfを使います。

				
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
    `
    <input #hello (keyup)="update(hello.value)" placeholder="メソッドの引数" />
    <h1>{{hello.value}}</h1>
  
    <h1 *ngIf="hello.value == 'a'">ngIf</h1>
   
    <ng-template [ngIf]="bbb">ng-template ngIf</ng-template>
    `
})
export class AppComponent {
  bbb = false;
  update(val: string) {
    this.bbb = val == "aa";
  }
}

ngSwitch

テンプレート(HTML)内でSWITCH分岐を行う場合、ngSwitchを使います。

				
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
    `
    <input #hello (keyup)="update(hello.value)" placeholder="メソッドの引数" />
    <h1>{{hello.value}}</h1>
  
    <div [ngSwitch]="hello.value">
      <h1 *ngSwitchCase="'aa'"> 
        ngSwitchCase1
      </h1>
      <h1 *ngSwitchCase="'aaa'"> 
        ngSwitchCase2  
      </h1>
      <h1 *ngSwitchDefault> 
        default  
      </h1>
    </div>
    `
})
export class AppComponent {
  update(value: string) {
  }
}

ng-template

テンプレート(HTML)内で実際のタグを使わず、Angularの処理を行いたいだけの場合、ng-templateタグを使用します。

				

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:
    `
    <input #hello (keyup)="update(hello.value)" placeholder="メソッドの引数" />
    <h1>{{hello.value}}</h1>

    <ng-template [ngIf]="bbb">ng-template ngIf</ng-template>

    <ng-template ngFor let-str [ngForOf]="strs" let-i="index" let-isLast="last" let-isOdd="odd">
      <div>
        ng-template - ngFor - {{ i }} - {{ str }} - 最後：{{ isLast }} - 奇数：{{ isOdd }}
      </div>
    </ng-template>
    `
})
export class AppComponent {
  bbb = false;

  update(value: string) {
    this.bbb = value == "aaaa";
  }
}

ページのトップへ戻る