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?
#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
For two-way binding you also need
<input #inp (change)="foo = inp.value)" [value]="foo = $event">
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
is the short form of
[ngModel]="foo" (ngModelChange)="foo = $event"
which shows it is for two-way binding.
#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.
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 : ->