[1]Data binding

一個流程允許應用程式去顯示 data values 到 使用者端和反應使用者功能(像是 click 、touches、keystrokes)

使用 data binding ，你要宣告 Html 組件 和 data 來源是有關連的，並讓 framework 處理細節，Data binding 是一個可以選擇推播應用程式的 data value 到 HTML，附加 event listeners 、 從螢幕拖曳改變值 和更新應用程式的 data values
繫結在表單上的Template 語法

• Interpolation (插入)
• Property binding (屬性繫結)
• Event binding (事件繫結)
• Attribute binding (屬性繫結)
• Class binding (類別繫結)
• Style binding (樣式繫結)
• Two-way data binding with ngModel (使用 ngModel 的 雙向繫結)

Interpolation (中文：插入)

符號：{{變數}}
說明：你可以使用 Interpolation 去編織計算字串 到 text 中，可以用於 html element 標籤中也可以用於 html 屬性內[2]
使用方法

• 一般使用
• 數字相加
• 使用方法
• 用在 html 屬性上

一般使用

src\app\app.component.ts
-----
export class AppComponent {
    title = 'app';
}

src\app\app.component.html
-----
<h1>
    Welcome to {{ title }}!
</h1>

顯示

數字相加

src\app\app.component.html
-----
<h1>
    Welcome to {{ 1+2+3 }}!
</h1>

顯示

使用方法

src\app\app.component.ts
-----
export class AppComponent {
    getValue() {
        return 2;
    }
}

src\app\app.component.html
-----
<h1>
    Welcome to {{ 1 + getValue() }}!
</h1>

顯示

用在 html 屬性上

src\app\app.component.ts
-----
export class AppComponent {
    defaultValue = '預設的值';
}

src\app\app.component.html
-----
<h1>
    <input type="text" value="{{defaultValue}}">
</h1>

顯示

參考來源

[1]
data binding
[2]
Interpolation