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

Question

Here is a template example:

Answer 1

It's quite simple [] => component to template () => template to component [(ngModel)] is a contracted form of [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

More detail here : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Answer 2

[ngModel] evaluates the code and generates an output (without two-way binding).
[(ngModel)] evaluates the code and generates an output and also enables two-way binding.

Answer 3

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

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

Answer 5

Angular2+ data flow:

In Angular the data can flow between the model (component class ts.file) and view (html of the component) in the following manners:

1. From the model to the view.
2. From the view to the model.
3. Data flows in both directions, also known as 2 way data binding.

Syntax:

model to view:

<input type="text" [ngModel]="overRideRate">

This syntax is also known as property binding. Now if the overRideRate property of the input field changes the view automatically will get updated. However if the view updates when the user enters a number the overRideRate property will not be updated.

view to model:

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

What happens here is that an event is triggered (in this case input event, but could be any event). We then can call methods of the component class or directly save the property in a class property.

2-way data binding:

<input [(ngModel)]="overRideRate" type="text" >

The following syntax is used for 2-way data binding. It is basically a syntactic sugar for both:

1. Binding model to view.
2. Binding view to model

Now something changes inside our class this will reflect our view (model to view), and whenever the user changes the input the model will be updated (view to model).