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?

`[ngModel]` - it's property binding only, not two-way binding. So entering new value will not update `overRideRate`. — VadimB, Feb 28 '17 at 09:32
[(ngModel)] is two way binding that comes from Angular 2. [ngModel] is just for show up. — David Doan, Feb 28 '17 at 09:35
Deprecation alert: in Angular 6, (https://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: (https://stackoverflow.com/questions/50371079/two-way-binding-on-angular-6-reactive-form) — sboggs11, Jul 26 '18 at 16:06
sboggs10 The link that you provided refers to combining ngModel with reactive forms, this is not related to the question in almost cases. — Cesar Leonardo Ochoa Contreras, Oct 16 '18 at 13:24
Here is a good explanation about `[(ngModel)]`, [Two-way Data Binding in Angular](https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html) — cateyes, May 03 '20 at 23:37
Note, in [Two-way Data Binding in Angular](https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html), it has ``. When following it for ``, 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. — cateyes, May 12 '20 at 01:53
Have checked on [StackBlitz](https://stackblitz.com/edit/angular-ivy-b89zmz) with `"@angular/core": "^9.1.4"`. `` still works fine. Turned out that something else prevents it from working in our `Angular 9.1.3` project mentioned previously. — cateyes, May 15 '20 at 09:23

score 202 · Accepted Answer · answered Feb 28 '17 at 09:33

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

seidme · Answer 2 · 2017-02-28T09:58:48.853

80

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

edited Feb 28 '17 at 09:58

answered Feb 28 '17 at 09:35

seidme

12,543
5
36
40

score 27 · Answer 3 · answered Feb 28 '17 at 09:34

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

score 17 · Answer 4 · answered Nov 25 '18 at 16:32

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:

From the model to the view.
From the view to the model.
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:

Binding model to view.
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).

score 11 · Answer 5 · answered Aug 01 '19 at 10:16

11

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

answered Aug 01 '19 at 10:16

Buzzzzzzz

1,074
13
17

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

5 Answers5

Angular2+ data flow:

Syntax:

Linked