Difference between [(ngModel)] and [ngModel] for binding state to property?

LittleDragon picture LittleDragon · Feb 28, 2017 · Viewed 96.9k times · Source

Here is a template example:

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

Here both of them do the same thing. Which one is preferred and why?

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Feb 28, 2017

[(ngModel)]="overRideRate" is the short form of [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

  • [ngModel]="overRideRate" is to bind overRideRate to the input.value
  • (ngModelChange)="overRideRate = $event" is to update overRideRate with the value of input.value when the change event was emitted.

Together they are what Angular2 provides for two-way binding.