Template Reference Variables

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:

Here’s how I could use that reference variable to get the value of the input, for instance:

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:

For more information and examples, you can read another short blog post of mine here.

That’s it for day one.