什麼是 ngModel

Angular 的雙向繫結 ngModel 便是 Vue 3 的「雙向綁定 v-model」的概念。

語法 [()]

雙向繫結的語法 [()] 很有趣，由屬性繫結 [] + 事件繫結 () 的集合體。

範例

通常會使用在表單元件的互動上

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  imports: [FormsModule],
  template: `
    <main>
      <h2>Hello {{ firstName }}!</h2>
      <input type="text" [(ngModel)]="firstName" />
    </main>
  `
})
export class AppComponent {
  firstName = 'Ada';
}

子元件使用

子元件必須包含一個model屬性。

import { Component, model } from '@angular/core';
@Component({ /* Omitted for brevity */ })
export class CounterComponent {
  count = model<number>(0);
  updateCount(amount: number): void {
    this.count.update(currentCount => currentCount + amount);
  }
}

參考資料

• https://dev.angular.tw/guide/templates/two-way-binding#two-way-binding-with-form-controls