Angular - [(ngModel)] vs [ngModel] vs (ngModel)

Question

I currently understand that [(ngModel)]="expression" is two-way binding from component to view and vice versa. I also understand that [ngModel]="expression" is one-way binding (I believe from component to view?). Then there's the possibility of (ngModel)="expression". I am mostly confused as to the differences between [ngModel] vs (ngModel). Could someone please explain?

EDIT: After playing around with, and reviewing the document snippet given by @Rohan Fating I realized that something like (ngModel) should take a statement, rather than an expression. That being said, would there ever be an appropriate time to use something like (ngModel) or would that even work in any circumstance?

hey, is there anything unclear about [my answer](https://stackoverflow.com/a/46123215/2545680)? — Max Koretskyi, Sep 10 '17 at 15:02
nope, thanks for the explanation. That's exactly what I wanted to know! — mbucks, Sep 11 '17 at 16:58

Max Koretskyi · Accepted Answer · 2021-12-04T07:58:59.967

This syntax:

[(ngModel)]="expression"

is unwrapped by the compiler into

[ngModel]="expression" (ngModelChange)="expression=$event"

which means:

there's a ngModel directive applied to an element (input)
this ngModel directive through ngModel binding takes the expression parameter
there's an output (event) ngModelChange

Now you can see that [ngModel] part is always there which as you noted will sync values down.

What happens when you specify (ngModel)="c()" is interesting. Normally, the (...) syntax is for events. So indeed Angular recognizes this as event and create appropriate listener in the component view factory:

function (_v, en, $event) {
    var ad = true;
    var _co = _v.component;
    ...
    if (('ngModel' === en)) {
        var pd_4 = (_co.c() !== false);
        ad = (pd_4 && ad);
    }
    return ad;
}

However, all (...) elements are also parsed as attributes, and so it will match the ngModel directive selector:

selector: '[ngModel]:not([formControlName]):not([formControl])'

so Angular will also initialize the ngModel directive class as a directive. However, since it doesn't have any input bindings defined through [...] syntax this directive will be skipped during change detection. And since also the event ngModel is not defined for the ngModel directive the usage (ngModel) will have no side effects and is meaningless.

Rohan Fating · Answer 2 · 2017-09-08T19:31:03.923

6

[( in Angular is signalling a two-way data binding. Theoretically you could only bind to an event ((ngModel)) or to a value ([ngModel]). This gives you the ability to handle changes going down in a different way than changes coming up. With Angular 2 you have that flexibility.

You need to ngModelChange event and update value like I did below

Plunker link: https://plnkr.co/edit/RZMgM69doSHGBG1l16Qf?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
    <input [ngModel]='value' (ngModelChange)='setModel($event)'/>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  value: string = '';
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  setModel(value) {
    this.value = value;
  }

}

edited Sep 08 '17 at 19:31

answered Sep 08 '17 at 16:21

Rohan Fating

2,135
15
24

So `(ngModel)` would be considered an event binding? Meaning the user inputted data, and I want to read what they input? Whereas if I use `[ngModel]` I am only wanting to change the value a user sees, but they cannot effect that value? – mbucks Sep 08 '17 at 16:26
Added screen shot and you can refer this link from angular.io ::: https://angular.io/guide/template-syntax#binding-syntax-an-overview – Rohan Fating Sep 08 '17 at 16:37
After testing out `(ngModel)="expression"` I realized it's not adding the inputted value to the model in my component. Is this because `ngModel` isn't considered an event? – mbucks Sep 08 '17 at 18:25
Also my question doesn't necessarily have to do with the binding, as much as it does the specifics of `[ngModel]` vs `(mgModel)`. Does `(ngModel)` even work? – mbucks Sep 08 '17 at 18:50
Updaed answer with code,, ngModelChange event we need to bind for event binding but [ngModel] should always be there. model change would be require to perform some action on change of input basically. – Rohan Fating Sep 08 '17 at 19:21

score 4 · Answer 3 · edited Sep 09 '17 at 00:05

4

[(ngModel)] is two way binding (NgModel) is one Way binding view to component [ngModel] is one way binding component to view

edited Sep 09 '17 at 00:05

Aniruddha Das

20,520
23
96
132

answered Sep 08 '17 at 16:34

Cherifa GHERSI

51
2

I edited my question above. I tried using `(ngModel)="exampleObj.foo"` but realized that it does not bind to the object on my component like I would expect. – mbucks Sep 08 '17 at 18:45

Angular - [(ngModel)] vs [ngModel] vs (ngModel)

3 Answers3

Linked

Related