Template reference variables in Angular - Step-by-Step Execution

Concept Flow - Template reference variables

Template renders

↓

Declare #ref on element

↓

Access element or component via #ref

↓

Use #ref in template expressions or event handlers

↓

Angular updates view with #ref value

Angular reads the template, finds #ref variables, links them to elements or components, and allows access inside the template for interaction.

Execution Sample

Angular

<input #myInput type="text">
<button (click)="alert(myInput.value)">Show</button>

Defines a template reference variable #myInput on an input element and uses it in a button click to show the input's current value.

Execution Table

Step	Template Element	Action	Template Reference Variable	Value at Step	Effect
1	<input>	Create input element	#myInput	input element reference	Variable #myInput points to input element
2	<button>	Create button element	none	none	Button ready with click event
3	Button click event	User clicks button	#myInput	input element reference	Access input.value via #myInput
4	Button click event	Evaluate alert(myInput.value)	#myInput	current text in input	Alert shows input's current text
5	End	No more actions	none	none	Execution stops

💡 User finishes interaction; no further template events

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
#myInput	undefined	input element reference	input element reference	input element reference	input element reference

Key Moments - 2 Insights

Why can we use #myInput.value inside the button click event?

Because #myInput holds a reference to the input element, Angular lets us access its properties like 'value' directly in the template event, as shown in execution_table step 4.

Is #myInput available outside the template where it is declared?

No, #myInput is only accessible inside the template where it is declared, not in the component class or other templates, as seen in execution_table step 1 and 2.

Visual Quiz - 3 Questions

Look at the execution table, what does #myInput point to after step 1?

A The input element reference

B The button element reference

C Undefined

D The component instance

💡 Hint

Check the 'Value at Step' column for step 1 in the execution_table

At which step does the button click event access #myInput.value?

A Step 3

B Step 4

C Step 1

D Step 2

💡 Hint

Look for 'Evaluate alert(myInput.value)' in the Action column of execution_table

If the input text changes before clicking the button, how does that affect #myInput.value in the alert?

A It shows an empty string

B It shows the original input text when the page loaded

C It shows the updated input text

D It causes an error

💡 Hint

Refer to variable_tracker showing #myInput always points to the input element, so its value reflects current text

Concept Snapshot

Template reference variables (#ref) let you name elements or components in Angular templates.
Use #ref on an element to access it elsewhere in the template.
Commonly used to read input values or call component methods.
Accessible only inside the template where declared.
Example: <input #myInput> then use myInput.value in events.
They provide direct access without needing component code.

Full Transcript

In Angular templates, you can create a template reference variable by adding # followed by a name on an element, like #myInput on an input field. This variable holds a reference to that element or component instance. You can then use this variable inside the template, for example in event handlers, to access properties or call methods. When the template renders, Angular links the variable to the actual element. When a user clicks a button that uses this variable, Angular accesses the current state of the element, such as the input's value, and performs the action like showing an alert. The variable only exists inside the template and is not accessible in the component class. This allows easy interaction with elements directly in the template without extra code.