What is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?
#xxx
#xxx
allows you to get an element reference.
<input #inp (change)="foo = inp.value">
listenes to the change event and calls onChange()
and passes the inputs value
property
For two-way binding you also need
<input #inp (change)="foo = inp.value)" [value]="foo = $event">
NgModel
<input [(ngModel)]="foo">
uses the NgModel
directive that allows to integrate DOM input elements and custom components into Angular form functionality.
It can also be used without a form.
NgModel
is an abstraction over all kinds of elements and components, while above (#inp
) example only works for input elements that have a value
property and emit a change
event.
[(ngModel)]="foo"
is the short form of
[ngModel]="foo" (ngModelChange)="foo = $event"
which shows it is for two-way binding.
hint
#xxx
returns a component or directive instance, if the element is not a plain DOM element but an Angular component or has an Angular directive applied.
The #name syntax is a template reference which refers to the html object, more information can be found on in the Angular docs: Angular template guide
The [(ngModel)] is setting two way binding on the elements value and assigning that to a variable.