Two-way binding trong Angular là gì?

Two-way binding giữ một giá trị đồng bộ theo cả hai hướng: khi property của class đổi thì view cập nhật, và khi người dùng đổi view thì property cập nhật. Cú pháp [(x)] đôi khi gọi là "banana in a box" và kết hợp property binding [x] với event binding (xChange).

Dạng kinh điển là [(ngModel)] trên trường form, cần FormsModule:

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

Nó là cách viết tắt của [ngModel]="name" (ngModelChange)="name = $event".

Với component của bạn, dùng model() dựa trên signal. Nó khai báo một input và một output cùng lúc.

@Component({
  selector: 'app-counter',
  template: `<button (click)="value.set(value() + 1)">{{ value() }}</button>`,
})
export class Counter {
  value = model(0)
}

<app-counter [(value)]="count" />

Khi component con gọi value.set(...), signal count của component cha cũng được cập nhật.

Dùng two-way binding cho các component giống form, và dùng luồng một chiều ở những chỗ khác.