Angular Two Way Binding ngModel

What is Two Way Binding ngModel in Angular?

Two-way binding keeps a component property and a form control in sync in both directions. The [(ngModel)] syntax — nicknamed the banana in a box — combines a property binding and an event binding into one.

Two Way Binding ngModel example

<input [(ngModel)]="city" name="city">
<p>Searching in: {{ city }}</p>

<!-- exactly equivalent to -->
<input [ngModel]="city" (ngModelChange)="city = $event" name="city">

How this works

The brackets push the value into the input; the parentheses push user changes back into the property. Expanding it shows there is no magic — it is two ordinary bindings.

Key points to remember

• Import FormsModule in the standalone component or module, or ngModel is not recognised.
• Every ngModel inside a form needs a name attribute.
• Two-way binding also works on your own components via an @Input paired with a matching xChange @Output.

Common mistakes with Two Way Binding ngModel

• Forgetting FormsModule, which produces "Can't bind to ngModel since it isn't a known property of input".
• Using ngModel together with reactive forms on the same control — Angular warns and behaviour becomes unclear.