`Two-Way Binding`

Synchronizes a value between component and view in both directions.

Since Angular 2+ Spec ↗

Syntax

[(target)]="property"

Parameters

Name	Type	Required	Description
`property`	`any`	No	The component property kept in sync with the target.

Returns

template binding — Combined property and event binding.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" />
    <app-toggle [(checked)]="isOn"></app-toggle>
  `,
})
export class XComponent {
  name = 'Ada';
  isOn = false;
}

Notes

The banana-in-a-box `[(x)]` is sugar for `[x]` plus `(xChange)`. It works with ngModel and with custom components exposing a model() signal or a matching input/output pair. Requires FormsModule for ngModel.