What is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?

Question

I am a little bit confused, for some tutorial use # to get the input, while some use the [(ngModel)]. What is the effective difference between the two?

Answer 1

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