What is two-way binding in Angular?

Two-way binding keeps a value in sync in both directions: when the class property changes, the view updates, and when the user changes the view, the property updates. The syntax [(x)] is sometimes called "banana in a box" and combines a property binding [x] with an event binding (xChange).

The classic form is [(ngModel)] on a form field, which needs FormsModule:

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

It is shorthand for [ngModel]="name" (ngModelChange)="name = $event".

For your own components, use the signal-based model(). It declares an input and an output together.

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

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

When the child calls value.set(...), the parent's count signal is updated too.

Use two-way binding for form-like components, and one-way flow elsewhere.