Lesson 7 / 30

Two-Way Binding

Combine property and event binding with ngModel.

[(ngModel)]

The "banana in a box" syntax [()] keeps a class field and an input's value in sync in both directions.

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

Requires FormsModule

ngModel lives in FormsModule — a standalone component must add it to its imports array before [(ngModel)] will work.

It's sugar

[(ngModel)]="x" is shorthand for [ngModel]="x" (ngModelChange)="x = $event" — property binding plus event binding.