Template reference for direct access in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing an input value via template reference?

Consider this Angular template snippet:

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

What will be logged when the button is clicked?

Angular

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

A An error because #userInput is not accessible in the component

B "Hello"

C undefined

D "userInput"

💡 Hint

Template reference variables allow direct access to DOM elements in the template.

The template reference #userInput points to the input element. Accessing userInput.value gets the current value, which is "Hello" initially.

📝 Syntax

intermediate

Which template reference syntax correctly accesses a child component's method?

Given a child component <app-child> with a method reset(), which template code correctly calls reset() from a button click?

A &lt;app-child #childComp&gt;&lt;/app-child&gt;<br>&lt;button (click)="childComp.reset()"&gt;Reset&lt;/button&gt;

B &lt;app-child #childComp&gt;&lt;/app-child&gt;<br>&lt;button (click)="childComp()"&gt;Reset&lt;/button&gt;

C &lt;app-child&gt;&lt;/app-child&gt;<br>&lt;button (click)="#childComp.reset()"&gt;Reset&lt;/button&gt;

D &lt;app-child #childComp&gt;&lt;/app-child&gt;<br>&lt;button (click)="reset()"&gt;Reset&lt;/button&gt;

💡 Hint

Template reference variables can be used to call public methods of child components.

Option A correctly assigns a template reference #childComp to the child component and calls its reset() method on button click.

🔧 Debug

advanced

Why does this template reference cause a runtime error?

Template snippet:

<app-input #inputRef></app-input>
<button (click)="inputRef.focus()">Focus</button>

Runtime error: "inputRef.focus is not a function". Why?

A The template reference variable is not accessible inside the (click) event.

B The input element does not have a focus() method in Angular templates.

C The template reference points to an Angular component, not a native input element, so focus() is undefined.

D The input element is missing a closing tag causing the reference to fail.

💡 Hint

Check what the template reference actually points to.

If the input is wrapped in a component, the template reference points to the component instance, which lacks native DOM methods like focus().

❓ state_output

advanced

What is the value of the template reference variable after user input?

Template:

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

Component method:

showName(name: string) {
  this.displayName = name;
}

If the user types "Angular" in the input and clicks Show, what is the value of displayName?

A "" (empty string)

B "nameInput"

C undefined

D "Angular"

💡 Hint

Template reference variables reflect the current state of the DOM element.

The value property of the input element reflects the typed text. Passing nameInput.value sends "Angular" to the method.

🧠 Conceptual

expert

Why use template reference variables instead of @ViewChild for direct access?

Which reason best explains when template reference variables are preferred over @ViewChild in Angular?

A Template references allow direct access in the template without needing component class code, useful for simple DOM interactions.

B @ViewChild is deprecated and should not be used anymore.

C @ViewChild only works with native DOM elements, not Angular components.

D Template references can access private component properties, while @ViewChild cannot.

💡 Hint

Think about where and how you want to access elements or components.

Template references provide quick access in the template itself, avoiding extra code in the component class for simple tasks.