我們現在知道如何用 component 來顯示頁面，要組成 component，需要的是 ts 和 html ，由 ts 負責程式邏輯， html 負責顯示畫面。我們來看看這兩個檔案，是如何傳遞資料以及溝通的吧。

今天我們介紹兩種 binding 的方式。

Interpolation

首先是最基本的 Interpolation ，我們先前在app.component.html看過的：

{{ ... }}

// app.component.html
Welcome to {{ title }}!

// app.component.ts
export class AppComponent {
  title = 'Sponge-Website';
}

很單純的就是將 .ts 內的變數丟到 html 。Interpolation是屬於單向的資料流，只能從 .ts 端送資料給 html。
那我們還可以這麼做：

// app.component.html
<a href="{{ url }}">Link</a> 

// app.component.ts
export class AppComponent {
  title = 'Sponge-Website';
  url = 'http://www.google.com';
}

那麼這個URL就能被動態指定。
Angular 會對 {{...}} 裡的內容先做求值，再轉換成字串，我們可以在裡面放入運算式:

// app.component.html
<p>3! = {{ 1 * 2 * 3 }}</p>

執行結果:

{{...}}中也可以放入 function ，我們在 .ts 定義一個 function 叫factorial()，且加入一個member variable 叫factorialNumber：

// app.component.html
<p>{{factorialNumber + '!'}} = {{ factorial() }}</p>

// app.component.ts
export class AppComponent {

 factorialNumber = 5;
 factorial() {
    let result = 1;
    for (let i = 1; i < this.factorialNumber + 1; i++) {
      result *= i;
    }
    return result;
  }
  
}

執行結果：

這邊的 factorial() 函式，表示求一個數字的階乘，從 1 一直乘到 factorialNumber 指定的 5 ， this.factorialNumber 的 this 表示這個變數是屬於自己本身這個class，這邊是屬於物件的觀念。

如果我在 {{...}} 中放一些奇怪的東西呢：

// app.component.html
<p>getNumber: {{ getNumber()  + 1 + A }} </p>

// app.component.ts
export class AppComponent {
  number = 5;
  getNumber() {
    return this.number;
  }
  
}

Angular 求值時就會顯示 Not A Number：

乖乖加上引號， Angular 就會很好心幫我們將字串做連接：

// app.component.html
<p>getNumber: {{ getNumber()  + 1 + 'A' + "BC" }} </p>

Property binding

當我們在 html 元素中，要動態指定屬性的值時，會選擇使用 Property binding ，語法：

[property]="value"

要記得的是，使用Property binding 時，要將html元素中的屬性，用中括號 [] 括起來。

我們前面在 app.component.ts 中定義了 url ，我們再次使用他:

<a href="http://www.google.com"> Normal Link</a><br>
<a [href]="url"> Property binding Link</a>

export class AppComponent {
  url = 'http://www.google.com';
}

Normal Link 和 Property binding Link 這兩個連結，效果一樣，但使用 Property binding ，可以動態決定 url ，實作彈性較大。

你還可以用這種方式實現 Property binding：

<a bind-href="url"> Property binding Link</a>

在屬性前面加上 bind-，而不使用[]，效果一樣。