HTML 是 Angular 模板的語言。這一節學習如何通過資料繫結來動態設定 DOM（文件物件模型）的值。
一、繫結語法
繫結的型別可以根據資料流的方向分成三類： 從資料來源到檢視、從檢視到資料來源以及雙向的從檢視到資料來源再到檢視。
| 資料方向 | 語法 | 繫結型別 |
|---|---|---|
| 單向(從檢視到資料來源) | {{ }}、 [target]="expression"、bind-target="expression" | 插值、（屬性、樣式、CSS類、Attribute） |
| 單向(從資料來源到檢視) | (target)="statement"、on-target="statement" | 事件 |
| 雙向繫結 | [(target)]="expression"、bindon-target="expression" | 雙向 |
二、繫結目標
插播：property屬性值可以是各種型別的，attribute屬性值只能夠是字串。
| 繫結型別 | 目標 |
|---|---|
| 屬性 | 元素的 property、元件的 property、指令的 property |
| Attribute(極少數情況下) | attribute（例外情況） |
| CSS 類 | class property |
| 樣式 | style property |
| 事件 | 元素的事件、元件的事件、指令的事件 |
| 雙向 | 事件與 property |
1、屬性繫結示例
當要渲染的資料型別是字串時，沒有技術上的理由證明哪種形式更好。 但資料型別不是字串時，就必須使用屬性繫結了。
元素：<img [src]="heroImageUrl">
元件(父子元件之間通訊)：<app-hero-detail [hero]="currentHero"></app-hero-detail>
指令：<div [ngClass]="{'special': isSpecial}"></div>
複製程式碼2、Attribute繫結示例
<button [attr.aria-label]="help">help</button>
複製程式碼3、CSS 類繫結示例
<div [class.special]="isSpecial">Special</div>
複製程式碼4、樣式繫結示例
<button [style.color]="isSpecial ? 'red' : 'green'">
複製程式碼5、事件繫結示例
元素：<button (click)="onSave()">Save</button>
元件(父子元件之間通訊)：<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
指令：<div (myClick)="clicked=$event" clickable>click me</div>
複製程式碼6、雙向繫結
<input [(ngModel)]="name">
複製程式碼