テンプレートとデータバインディング

テンプレートを使うと、Angularで動的なコンテンツを表示できます。このレッスンでは、テンプレートとデータバインディングの仕組みについて学びます。

テンプレートとは

テンプレートは、Angularがコンポーネントのビューを描画するために使うHTMLです。HTMLとAngular固有の構文を組み合わせて、データを表示します。

補間

補間を使うと、コンポーネントの値をHTMLに埋め込めます。データを表示するには、二重中かっこを使います。

{{ data }}

{{ username }}

プロパティバインディング

プロパティバインディングを使うと、HTML要素のプロパティを動的に設定できます。

[src] = "imageUrl"

<img [src]="user.profilePicture">

イベントバインディング

イベントバインディングを使うと、ユーザーの操作に応答できるようになります。

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

双方向バインディング

双方向バインディングを使うと、UIとデータを同期した状態に保てます。[(ngModel)]を使います。

<input [(ngModel)]="user.name">

構造ディレクティブ

構造ディレクティブはDOMの構造を変更します。*ngIfや*ngForなどがあります。

<div *ngIf="isVisible">Visible Content</div>

ngForを使う

*ngForはデータを繰り返し処理し、要素を繰り返し表示します。

<li *ngFor="let item of items">{{ item }}</li>

まとめ

テンプレートとデータバインディングを使って、動的なAngularビューを作成する方法を学びました。