隨記

Week 03 · Day 04 — 資料綁定：事件與雙向綁定

學習目標

事件綁定（Event Binding）

<button (click)="onClick()">Click</button>
<input (input)="handleInput($event)">

- (事件名)="方法()" - $event 代表事件物件，可取 e.target.value

onClick(): void {
  console.log("Button clicked!");
}
handleInput(e: any): void {
  console.log((e.target as HTMLInputElement).value);
}

雙向綁定 [(ngModel)]

<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>

- 同時「讀值」與「寫值」 - 使用前需在模組 import FormsModule

// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({ imports: [FormsModule] })

實作邏輯

export class BindingDemoComponent {
  name = "";
}

- 使用者在輸入框打字 → name 自動更新 → {{ name }} 即時顯示

承上 Day03 元件加入：

<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>