Menu
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?
822
This is a matter of pronunciation. The definite article 'the' has two pronunciations, each in a different context. If the word that comes after 'the' begins with a vowel sound, then 'the' is pronounced like ði ( like 'thi' ).
Normally, we pronounce the with a short sound (like "thuh"). But when the comes before a vowel sound, we pronounce it as a long "thee". When we wish to place emphasis on a particular word, we can use "emphatic the" [thee], whether or not the word begins with a consonant or vowel sound.
The pronunciation of the word "the" depends on the first sound of the word that comes after it. When the word after "the" begins with a consonant sound, people usually use /ðə/. When the word after "the" begins with a vowel sound, people usually use /ði/. Below are examples of when to use each pronunciation.
The definite article (the) is used before a noun to indicate that the identity of the noun is known to the reader. The indefinite article (a, an) is used before a noun that is general or when its identity is not known. There are certain situations in which a noun takes no article.
#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.
185
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
