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?

Adjuvant

[ngModel] - it's property binding only, not two-way binding. So entering new value will not update overRideRate. – Pantheism

[(ngModel)] is two way binding that comes from Angular 2. [ngModel] is just for show up. – Barretter

Deprecation alert: in Angular 6, (angular.io/api/forms/FormControlName#use-with-ngmodel) states this: Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. Also see: (#50371579) – Nason

sboggs10 The link that you provided refers to combining ngModel with reactive forms, this is not related to the question in almost cases. – Geronimo

Here is a good explanation about [(ngModel)], Two-way Data Binding in Angular – Bobinette

Note, in Two-way Data Binding in Angular, it has <input [value]="username" ...>. When following it for <textarea [value]="username">, found it works for "@angular/core": "^7.2.16". After upgrading to "@angular/core": "^9.1.3" it breaks. username isn't populated back to textarea anymore. Tried [attr.value]="username", no luck too. Have to use [ngModel]="username" to make it work which works for "@angular/core": "^7.2.16" of course. – Bobinette

Have checked on StackBlitz with "@angular/core": "^9.1.4". <textarea [value]="username"> still works fine. Turned out that something else prevents it from working in our Angular 9.1.3 project mentioned previously. – Bobinette

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.

Merciful

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.

Metamorphose

Answer 3

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

Pendulum

Answer 4

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

Tunicate

Answer 5

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

Bogy