先備知識

Attribute (中文：屬性) 和 Property (中文：屬性) 區別

• Attribute 屬於 Html
• Property 屬於 DOM

下面連結文章有相當的詳細的說明
https://www.w3cplus.com/javascript/dom-attributes-and-properties.html © w3cplus.com
 
 
 
 
 

Property binding (中文：屬性繫結)

符號：[屬性名稱]="值"
[1]使用一個 template property 要繫結並設定一組 property 在 view element 上，這組繫結的屬性 value 可以使用 template expression (中文：樣板表達式)

以下介紹三種使用方法

• 一般綁定 html 屬性
• 綁定 directive
• 配置一組 model 屬性到一個自訂 component (等路由開啟就會陸續出現了)

一般綁定 html 屬性

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

src\app\app.component.html
-----
<h1>
    Welcome to {{title}}!
    <button class="" type="button" [disabled]="isOpen">Click Me!</button>
</h1>

顯示

綁定 directive

所有 angular 的 directive
https://angular.io/api?type=directive

src\app\app.component.ts
-----
export class AppComponent {
    myStyle = {'color': 'yellow', 'background-color' : 'red'};
}

src\app\app.component.html
-----
<h1 [ngStyle]="myStyle">
    Welcome to {{title}}!
</h1>

顯示

配置一組 model 屬性到一個自訂 component

等路由開啟就會陸續出現了
 
 
 
 
 

Event binding (中文：事件繫結)

符號：(觸發動作)="事件名稱"
[2]到目前為止，您遇到的 bindings directives 資料流都是同一種方向：從 component 到 element
使用者不會只是看著螢幕，他們也會輸入文字到輸入框、從清單中挑選選項和點擊按鈕，這樣的使用者操作就是一種反向的資料流：從 element 到 component
用一種方法去知道使用者的活動，監聽某些事件，像是 鍵盤事件、滑鼠事件、點擊事件和觸碰事件，你可以在你感興趣的地方，宣告一個 angular event binding

[2]$event and event 處理狀態說明
在一個 event binding，angular 設置一個 event 去處理這個 target event。
事件發生時，處理器會執行 template statement (中文：樣板表達)。template statement 通常會包含接收器，接收器執行回應事件的動作，例如從 html control 的值 儲存到一個 model。
這個 binding 傳遞關於 event 的訊息，包含 data value，並通過 event object 稱為 $event。
event object 的 型別 由 target event 確定，假如 target event 是 native DOM element event，那 $event 就是一個 DOM event object，帶有 properties 像是 target 和 target.value

以下介紹兩種使用方法

• 綁定 觸發事件 執行 動作或某方法
• 傳送事件到別的 component (等路由開啟就會陸續出現了)

綁定 觸發事件 執行 動作或某方法

下列範例是利用 input 事件，修改 showMyValue 的值

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

src\app\app.component.html
-----
<input type="text" (input)="showMyValue = $event.target.value">

{{showMyValue}}

顯示
當在輸入框輸入內容，下列就會立刻顯示

傳送事件到別的 component

等路由開啟就會陸續出現了

參考來源

[1]
Property binding
[2]
Event binding