CODEWITHSUNDEEP
angularangular2-forms
pyy
pyy

Reputation: 965

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

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?

Upvotes: 21

Views: 34561

Answers (3)

Akash pati
Akash pati

Reputation: 1

Template reference variable is only used for accessing the dom properties of the element. So for two binding or any change we need to write
-> but by using ngmodel binding which helps in angular two way data binding can be done in a short by : ->

Upvotes: -2

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657248

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

Upvotes: 35

bower
bower

Reputation: 166

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.

Upvotes: 11

Related Questions