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?
This syntax:
[(ngModel)]="expression"
is unwrapped by the compiler into
[ngModel]="expression" (ngModelChange)="expression=$event"
which means:
expression
parameterngModelChange
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.