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