Welcome to the very first edition of my daily Angular Newsletter! As promised, I’ll keep it nice and short.<\/p>\n\n\n\n
Today’s topic is Template Reference variables. I usually call that feature \u201cthe hashtag syntax\u201d because that’s how it’s used:<\/p>\n\n\n
<input<\/span> #phone<\/span> placeholder<\/span>=\"phone number\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nHere\u2019s how I could use that reference variable to get the value of the input, for instance:<\/p>\n\n\n
<button<\/span> (click<\/span>)=\"callPhone(phone.value)\"<\/span>><\/span>Call<\/button<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nphone<\/strong><\/code> refers to the input element with the #phone attribute created earlier. That’s the template reference variable.
These variables can be used instead of ngModel<\/strong>, for instance. Even better, they also work with components and directives!<\/p>\n\n\n\nFor instance, the following template reference variable hello<\/code> would have access to all public properties and methods of the HelloComponent<\/code>:<\/p>\n\n\n<app-hello<\/span> #hello<\/span> ><\/span><\/app-hello<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n