All 5 Template Reference Variables & ViewChild questions
More in Template Reference Variables & ViewChild
What is the difference between ViewChild and ContentChild in Angular? What does the ViewChild decorator do, and how would you use it to access a child component from a parent's TypeScript code? How does the newer signal based viewChild function differ from the traditional ViewChild decorator? How would you use ViewChildren to get references to multiple instances of the same child component or element?
Advertisement
Back to results for “Data Binding”
Angular › Template Reference Variables & ViewChild

What is a template reference variable in Angular, and how do you use one?

Beginner

Answer

A template reference variable, created with a hash symbol directly in your template, gives you a way to refer to a DOM element or a component instance from elsewhere within that same template, such as reading an input's current value when a button is clicked.
<input #nameInput type="text" />
<button (click)="greet(nameInput.value)">Greet</button>
Real-world example A simple search form reads the current value typed into an input field directly through a template reference variable when a search button is clicked, without needing any two way binding for this specific interaction.

Common follow-ups: Can a template reference variable be used outside of the specific template it was declared in?;What does a template reference variable refer to when placed on a custom Angular component instead of a native element?

Data Binding;Components & Templates
All 5 Template Reference Variables & ViewChild questions