Componentsbeginner
Template Reference Variables
Explain how template reference variables let you access DOM elements or component instances directly from a template.
A template reference variable, declared with a hash like #myInput, gives you a handle to whatever it's attached to — a native DOM element, an Angular component instance, or a directive instance — that you can then reference elsewhere in the same template. This is often the fastest way to solve a small, local UI interaction without wiring up a full two-way binding or writing extra component state.
It's like sticking a labeled Post-it note directly onto a specific drawer in a filing cabinet — from anywhere else on that same cabinet, you can grab exactly that drawer by its label without describing where it is all over again.
Key Concepts
1
Interviewers like this topic because it distinguishes template-local wiring from component-class wiring: a template reference variable only exists within that template (and any nested templates via ngTemplateOutlet context) — it is not a property on the component class and can't be accessed from TypeScript code without something like @ViewChild.
ngTemplateOutlet@ViewChild
2
When the reference is on a plain HTML element, it resolves to the native DOM element (an HTMLInputElement, etc.), which is why #emailInput followed by emailInput.value is a common, simple pattern for reading uncontrolled input values without reactive forms. When placed on a component or directive, it resolves to that component/directive's instance, giving you access to its public properties and methods directly from the template.
HTMLInputElement#emailInputemailInput.value
3
A common interview follow-up is comparing this to @ViewChild: template reference variables are for referencing things within the same template declaratively, while @ViewChild is for reaching into a view from the component class imperatively, and the two are often used together.
@ViewChild