前言
Data Binding 是 Angular 的核心功能之一，可以幫助我們將應用程式的資料和 DOM 建立關聯，實現動態資料更新 DOM 的效果。
Data Binding 用途
Angular Data Binding 主要有四種形式：
- 插值綁定（Interpolation）
- 屬性綁定（Property Binding）
- 事件綁定（Event Binding）
- 雙向綁定（Two-way Binding）
Data Binding 優點
- 更加輕鬆地將 Component 與 Template 建立關聯
- 提高開發效率和可維護性
- Angular 變更偵測機制可以實現高效的資料更新，避免不必要的 DOM 操作
Interpolation
使用 {{ }} 語法將資料綁定到 Template，通常用於將資料顯示在標題、段落或表格等元素中。
<h1>{{ title }}</h1>
<p>{{ content }}</p>
Property Binding
使用 [ ] 語法將資料綁定到元素的 屬性 上,
通常用於修改元素的屬性值,
例如修改按鈕的文字 & 圖片的 URL 等…
<!-- 控制按鈕可不可以按的屬性 -->
<button [disabled]="isDisabled">{{ buttonLabel }}</button>
<!-- 綁定圖片 URL 屬性 -->
<img [src]="imageUrl" alt="Angular Logo" />
Event Binding
使用 ( ) 語法將元素的 事件 綁定到組件中的 方法 上,
通常用於 觸發特定的行為,
例如點擊按鈕時執行某個方法
<button (click)="onClick()">Click me!</button>
Two-way Binding
使用 [( )] 語法將元素的屬性和事件綁定到組件中的資料上，實現資料的雙向同步。
<!-- [(ngModel)] 是 Angular 中用來實現雙向資料綁定的指令-->
<input [(ngModel)]="username" />
在 Component 中：
export class AppComponent {
username: string = "John";
}
當使用者在輸入框中輸入內容時，username 的值會自動更新。反之，當 username 的值在程式碼中改變時，輸入框的內容也會自動更新。
總結
Angular Data Binding 提供了四種不同的綁定方式，讓我們可以輕鬆地在 Component 和 Template 之間傳遞資料：
- Interpolation（插值綁定）：
{{ }}，用於顯示資料 - Property Binding（屬性綁定）：
[ ]，用於設定元素屬性 - Event Binding（事件綁定）：
( )，用於處理使用者事件 - Two-way Binding（雙向綁定）：
[( )]，用於資料的雙向同步
掌握這些綁定方式，可以讓你在開發 Angular 應用時更加得心應手。