Template reference variables in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular template using a template reference variable?

Consider this Angular component template:

<input #userInput type="text" value="Hello">
<button (click)="onClick(userInput.value)">Show</button>
<p>{{message}}</p>

And this component class:

message = '';
onClick(value: string) {
  this.message = value;
}

What will be displayed in the paragraph after clicking the button?

Angular

<input #userInput type="text" value="Hello">
<button (click)="onClick(userInput.value)">Show</button>
<p>{{message}}</p>

A The paragraph shows 'Hello'

B The paragraph shows an empty string

C The paragraph shows 'userInput.value'

D The paragraph shows 'undefined'

💡 Hint

Think about what #userInput refers to and what userInput.value accesses.

The template reference variable #userInput points to the input element. Accessing userInput.value gets the current value of the input, which is 'Hello'. Clicking the button calls onClick with this value, updating message to 'Hello'.

📝 Syntax

intermediate

Which option correctly declares a template reference variable for a element?

Choose the correct syntax to declare a template reference variable named myInput on an <input> element.

A <input var-myInput type="text">

B <input let-myInput type="text">

C <input #myInput type="text">

D <input ref-myInput type="text">

💡 Hint

Template reference variables use a specific prefix symbol.

The correct syntax uses the hash symbol # before the variable name, like #myInput. The other prefixes are incorrect in Angular templates.

🔧 Debug

advanced

Why does this Angular template cause an error?

Given this template snippet:

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

And this component code:

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

Why does this cause a runtime error?

Angular

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

A inputRef is not defined in the component class, so it causes a ReferenceError

B inputRef.value is undefined because the input has no value attribute

C The template reference variable cannot be used inside methods without passing it as a parameter

D The button click event is not bound correctly

💡 Hint

Consider where inputRef is accessible in Angular.

Template reference variables exist only in the template scope. They are not accessible directly in the component class methods unless passed as parameters. Trying to access inputRef inside logValue() causes a ReferenceError.

❓ state_output

advanced

What is the value of 'count' after clicking the button twice?

Consider this Angular component template:

<button #btn (click)="increment(btn.textContent)">Click me</button>
<p>Count: {{count}}</p>

And this component class:

count = 0;
increment(text: string) {
  if (text === 'Click me') {
    this.count += 1;
  }
}

What is the value of count after clicking the button twice?

Angular

<button #btn (click)="increment(btn.textContent)">Click me</button>
<p>Count: {{count}}</p>

A 0

B 1

C NaN

D 2

💡 Hint

Check what btn.textContent returns and how increment updates count.

The template reference variable #btn points to the button element. Its textContent is 'Click me'. Each click calls increment with 'Click me', which increases count by 1. After two clicks, count is 2.

🧠 Conceptual

expert

Which statement about Angular template reference variables is TRUE?

Choose the correct statement about template reference variables in Angular.

A They can be accessed directly inside the component class without passing them as parameters.

B They can reference any DOM element or Angular component/directive instance within the template scope.

C They are only usable inside <code>&lt;ng-template&gt;</code> elements.

D They automatically update the component class properties without event bindings.

💡 Hint

Think about what template reference variables can point to and their scope.

Template reference variables can point to any DOM element or Angular component/directive instance in the template. They exist only in the template scope and are not accessible directly in the component class unless passed. They are not limited to <ng-template> and do not automatically update class properties.