Welcome to the very first edition of my daily Angular Newsletter! As promised, I’ll keep it nice and short.
Today’s topic is Template Reference variables. I usually call that feature “the hashtag syntax” because that’s how it’s used:
<input #phone placeholder="phone number" />Code language: HTML, XML (xml)Here’s how I could use that reference variable to get the value of the input, for instance:
<button (click)="callPhone(phone.value)">Call</button>Code language: HTML, XML (xml)phone 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, for instance. Even better, they also work with components and directives!
For instance, the following template reference variable hello would have access to all public properties and methods of the HelloComponent:
<app-hello #hello ></app-hello>Code language: HTML, XML (xml)For more information and examples, you can read another short blog post of mine here.