Two-Way Binding with ngModel
Sync form inputs with component state.
What Is Two-Way Binding?
Two-way binding keeps a value in sync between the component and the view: updating one updates the other. The syntax is the banana-in-a-box [()].
The Banana in a Box
The combined [(...)] syntax is shorthand for a property binding plus an event binding. The brackets are the box, the parentheses the banana.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">All lessons in this course
- Property and Event Binding Recap
- Two-Way Binding with ngModel
- model() Signal Inputs
- Custom Two-Way Bindable Properties