Angular 透過 Data Binding 讓 TypeScript(Component) 及 HTML(Template) 兩邊互相傳遞資料，Data Binding 的方式有四種。
將介紹 Angular 8 (Angular 2) 的四種 Data Binding 互動。

字串插值(String Imterpolation)

字串插值(String Imterpolation) 是直接在 Template 中插入 {{value}}，執行期間 value 的變化，都會連動更新到 Template 畫面上

透過 一般 value綁定
<p>{{'Server'}} with Id {{serverId}} is {{serverStatus}}</p>
透過 函式 回傳的 value 綁定
<p>{{'Server'}} with Id {{serverId}} is {{getServerStatus()}}</p>

export class ServerComponent implements OnInit {
  serverId:number =10;
  serverStatus:string = 'offline';
  constructor() { }

  ngOnInit() {
  }
  getServerStatus(){
    return this.serverStatus;
  }
}

當 TypeScript 中的 serverId 產生任何變化，Template 的內容都會隨之變動，而 getServerStatus 則是回持續呼叫該 Fucntion

屬性綁定(Property Binding)

屬性綁定(Property Binding)是在 HTML 中的屬性加入 [property]="value"，執行期間 value 的變化，會值接影響 property。

<button [disabled]="!allowNewServer">Add Server</button>

export class ServerComponent implements OnInit {
  allowNewServer = false;
  constructor() { 
    setTimeout(()=>{
      this.allowNewServer = true;
    },2000);
  }

  ngOnInit() {
  
}

結果如下

當 TypeScript 中的 allowNewServer 過兩秒後被改為 true，Template 的 Button 從 Disabled 變為 Abled

事件綁定(Event Binding)

事件綁定(Event Binding)用法是在 HTML 中的加入 (event)="functionName()"，當發生指定 event 時，就會呼叫 TypeScript 中的 functionName 方法。

雙向資料繫結(Two-Way-Binding)

Angular 的雙向資料繫結 與 AngularJS 的 雙向資料繫結 運作原理是完全不同的，目前看起來是沒有 AngularJS 會遇到效能問題。

雙向資料繫結 (Two-way Data Binding)用法是在 HTML 中的加入 [(ngModel)]="value"。
雙向綁定用於可以讓使用者互動的 HTML 元素，如：、、…等。

雙向綁定是屬性綁定加上事件綁定的組合，所以當 value 在 TypeScript 發生變化，HTML 就會跟著改變。
在 HTML 中發生變化，TypeScript 中的內容也會跟著改變。

在使用 [(ngModel)] 前，需要先在 AppModule 引用 FormsModule

import { FormsModule } from '@angular/forms'; 
imports:[ BrowserModule, FormsModule ],

參考

1. Angular 4 教學 - Data Binding

2. Angular 8 Data Binding

3. Angular Two-Way Data Binding