Two Way Binding

One way data binding

<input type="text" [ngModel]="name">
<p>{{ name }}</p>

Two way data binding with ngModel

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

// same as below
<input type="text" [ngModel]="name" (ngModelChange)="name=$event">

Combines @input and @Output

<app-counter [(count)]="count"></app-counter>
// OR
<app-counter [count]="count" (countChange)="count=$event"></app-counter>

Last updated

Was this helpful?