ビルトインの構造ディレクティブ

Angular のテンプレートシステムで使えるビルトインの構造ディレクティブは、主に次のものが挙げられます。

NgIf - DOM 要素の表示非表示の切替え
NgFor - DOM 要素の繰り返し表示
NgSwitch - 条件に応じた振分け

以下に簡単な使い方を示します。

NgIf

テンプレートにて *ngIf="true または false" とすることで、それを指定した DOM 要素を追加または削除します。

次の例ではボタンのイベントハンドラにて、*ngIf にバインドされたプロパティを書き換え、"Hello" という文字の表示・非表示を切替えています。

テンプレート:

<h1 *ngIf="showHello">Hello</h1>
<div>
  <button (click)="onClick(true)">Show</button>
  <button (click)="onClick(false)">Hide</button>
</div>

コンポーネント:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showHello = true;

  onClick(b: boolean){
    this.showHello = b;
  }
}

NgFor

*ngFor="let 変数 of コレクション" とすることで、配列とかリストといったコレクションを繰り返すことが可能です。

次の例ではコンポーネント内で定義した employees というオブジェクトのリスト内の要素について繰り返し処理しています。

テンプレート:

<ul>
  <li *ngFor="let e of employees">
    <strong>{{e.name}}</strong>
    <span style='color:brown;'>{{e.title}}</span>
  </li>
</ul>

コンポーネント:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  employees = [
    {name: 'Mike', title: 'Manager'},
    {name: 'Kevin', title: 'Sales Representative'},
    {name: 'Janet', title: 'HR'}
  ]
}

この実行結果は次のようになります。

NgSwitch

[ngSwitch]="プロパティ" としてバインドしたプロパティの値に応じて、DOM 要素の表示・非表示を切り替えることができます。

場合分けは *ngSwitchCase にて値を指定。どれにも当てはまらない場合の場合分けは *ngSwitchDefault で指定します。

次の例ではプロパティ sayWhen をバインドし、その値が 'morning'、'night' 、その他で場合分けしています。値を指定するときはシングルクォート ( ' ) が必要です。

テンプレート:

<div [ngSwitch]="sayWhen">
  <div *ngSwitchCase="'morning'">Good morning!</div>
  <div *ngSwitchCase="'night'">See you tomorrow!</div>
  <div *ngSwitchDefault>Hi!</div>
</div>
<div>
  <button (click)="onClick('morning')">In the morning</button>
  <button (click)="onClick('night')">At night</button>
  <button (click)="onClick('')">Other</button>
</div>

コンポーネント:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sayWhen = 'morning';

  onClick(s: string) {
    this.sayWhen = s;
  }
}

この実行結果は次のようになります。

ホーム » Angular の基礎