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

Question

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 1

[(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.

Answer 2

[ngModel]="currentHero.name" is the syntax for one-way binding, while,

[(ngModel)]="currentHero.name" is for two-way binding, and the syntax is compound from:

[ngModel]="currentHero.name" and (ngModelChange)="currentHero.name = $event"

If you only need to pass model, use the first one. If your model needs to listen change events (e.g. when input field value changes), use the second one.