Template reference for direct access in Angular - Step-by-Step Execution

Concept Flow - Template reference for direct access

Template renders

↓

Element with #ref created

↓

Component accesses element via #ref

↓

Use element properties or methods

↓

Update view or trigger actions

The template creates a reference to an element using #ref. The component accesses this element directly to read or change it.

Execution Sample

Angular

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

logValue(value: string) {
  console.log(value);
}

This code uses a template reference #myInput to get the input's value when the button is clicked and logs it.

Execution Table

Step	Template Action	Reference Created	Component Access	Output/Effect
1	Render <input> with #myInput	myInput points to input element	Not accessed yet	Input box appears on screen
2	Render <button> with click event	No new reference	Not accessed yet	Button appears on screen
3	User types 'Hello' in input	myInput.value = 'Hello'	Not accessed yet	Input shows 'Hello'
4	User clicks button	Reference still valid	logValue called with 'Hello'	Console logs: Hello
5	User changes input to 'World'	myInput.value = 'World'	Not accessed yet	Input shows 'World'
6	User clicks button again	Reference still valid	logValue called with 'World'	Console logs: World
7	End of interaction	Reference remains	No further access	No change

💡 User stops interacting; template reference remains valid throughout component lifecycle

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
myInput.value	'' (empty)	'Hello'	'World'	'World'
logValue input	N/A	'Hello'	'World'	N/A

Key Moments - 3 Insights

Why can the component access the input value directly using #myInput?

Because #myInput creates a direct reference to the input element in the template, allowing the component to read its properties like 'value' as shown in steps 3 and 4.

Does the template reference #myInput change when the user types?

No, the reference stays the same. Only the property 'value' of the referenced element changes, as seen in steps 3 and 5.

What happens if the button is clicked before typing anything?

The logValue function is called with an empty string because the input's value is initially empty, similar to step 1's initial state.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of myInput.value at Step 5?

A 'World'

B 'Hello'

C '' (empty)

D undefined

💡 Hint

Check the 'Reference Created' column at Step 5 in the execution table

At which step does the component first access the input's value?

A Step 3

B Step 4

C Step 1

D Step 6

💡 Hint

Look for 'Component Access' column where logValue is called

If the user never types anything, what will be logged when the button is clicked?

A 'Hello'

B 'World'

C '' (empty string)

D null

💡 Hint

Refer to the initial value of myInput.value in variable_tracker and execution_table Step 1

Concept Snapshot

Template reference (#ref) lets you grab an element in the template.
Use it to read or change element properties directly.
Example: <input #myInput> then access myInput.value.
Works only inside the template or event handlers.
Great for quick access without extra code.

Full Transcript

In Angular, you can create a template reference by adding #name to an element. This reference points directly to that element. For example, #myInput on an input box lets you access its value property directly. When the user types, the input's value changes but the reference stays the same. When a button is clicked, the component can use the reference to get the current input value and do something with it, like logging it. This method is simple and avoids extra code for accessing elements. The reference remains valid as long as the element is in the template.

Practice

1. What is the main purpose of a #templateReference in Angular templates?

easy

A. To bind data between components

B. To define a new Angular component

C. To create a service for dependency injection

D. To directly access a DOM element or component instance in the template

Solution

1. Step 1: Understand what template references do

   Template references let you name elements or components in the template for direct access.

2. Step 2: Identify their use

   They are used to access DOM elements or component instances directly without extra code.

3. Final Answer:

   To directly access a DOM element or component instance in the template -> Option D

4. Quick Check:

   Template reference = direct element/component access [OK]

Hint: Template references name elements for direct access [OK]

Common Mistakes:

• Confusing template references with component declarations
• Thinking they create services
• Assuming they handle data binding

2. Which of the following is the correct syntax to create a template reference named inputBox on an <input> element?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Angular template reference syntax

   Angular uses the hash symbol (#) to declare template references.

2. Step 2: Check each option

   Only #inputBox is valid syntax for template references on elements.

3. Final Answer:

   <input #inputBox> -> Option B

4. Quick Check:

   Use # for template references [OK]

Hint: Use # before name to create template reference [OK]

Common Mistakes:

• Using ref= instead of #
• Using * which is for structural directives
• Using $ which is invalid here

3. Given this template snippet:

<input #myInput type="text">
<button (click)="myInput.focus()">Focus</button>

What happens when the button is clicked?

medium

A. Nothing happens because focus() is not a valid method

B. An error occurs because myInput is undefined

C. The input box receives keyboard focus

D. The button text changes to 'Focus'

Solution

1. Step 1: Understand the template reference usage

   The #myInput references the input element, allowing direct access to its DOM methods.

2. Step 2: Analyze the click event

   Click calls myInput.focus(), which sets keyboard focus on the input element.

3. Final Answer:

   The input box receives keyboard focus -> Option C

4. Quick Check:

   Template ref calls focus() = input focused [OK]

Hint: Template refs access DOM methods like focus() [OK]

Common Mistakes:

• Assuming template refs are undefined in event handlers
• Thinking focus() is invalid on input elements
• Expecting button text to change

4. Consider this Angular template:

<input #userInput type="text">
<button (click)="logValue()">Log</button>

And this component code:

logValue() {
  console.log(userInput.value);
}

What is the problem here?

medium

A. The userInput template reference is not accessible in the component class

B. The logValue method is missing a parameter

C. The console.log statement is incorrect syntax

D. The button click event should be (click)="logValue(userInput)"

Solution

1. Step 1: Understand template reference scope

   Template references exist only in the template, not in the component class directly.

2. Step 2: Identify why userInput is undefined in the class

   Trying to access userInput in the class without passing it causes an error.

3. Final Answer:

   The userInput template reference is not accessible in the component class -> Option A

4. Quick Check:

   Template refs not in class scope [OK]

Hint: Template refs only exist in template, not class [OK]

Common Mistakes:

• Assuming template refs are class properties
• Forgetting to pass template ref as method argument
• Confusing template refs with ViewChild

5. You want to create a form with an input and a button that clears the input when clicked. Using a template reference #inputRef, which template code correctly implements this behavior?

hard

A.
Clear

B.
Clear

C.
Clear

D.
Clear

Solution

1. Step 1: Understand how to clear input value via template reference

   Directly setting inputRef.value = '' clears the input content.

2. Step 2: Check other options for correctness

   Options B, C, and D call undefined or non-existent methods: clear() is undefined in the component, and clear() and reset() are not methods on input elements.

3. Final Answer:

   <input #inputRef type="text"> <button (click)="inputRef.value = ''">Clear</button> -> Option A

4. Quick Check:

   Set inputRef.value to empty string to clear [OK]

Hint: Set inputRef.value = '' to clear input [OK]

Common Mistakes:

• Calling non-existent methods like clear() or reset() on input
• Trying to call component methods without passing template ref
• Confusing template ref usage with reactive forms