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.

Practice

1. What is the purpose of a template reference variable in Angular templates?

easy

A. To create a service for dependency injection

B. To define a new Angular component

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

D. To write CSS styles inside the template

Solution

1. Step 1: Understand what template reference variables do

   They let you refer to elements or components inside the template without extra code in the component class.

2. Step 2: Identify the correct purpose

   Accessing DOM elements or component instances directly in the template is exactly what template reference variables do.

3. Final Answer:

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

4. Quick Check:

   Template reference variable = direct template access [OK]

Hint: Remember: #variableName points to element/component [OK]

Common Mistakes:

• Confusing template reference variables with component or service creation
• Thinking they are used for styling or CSS
• Assuming they are for dependency injection

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Angular template reference variable syntax

   Angular uses the #variableName syntax to declare template reference variables.

2. Step 2: Match the syntax to the options

   Only uses #inputBox which is correct.

3. Final Answer:

   <input #inputBox> -> Option A

4. Quick Check:

   #variableName syntax = correct declaration [OK]

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

Common Mistakes:

• Using ref, var, or let which are not Angular template reference syntax
• Confusing Angular syntax with other frameworks
• Missing the # symbol

3. Given the template snippet:

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

What happens when the button is clicked after typing "Hello" in the input?

medium

A. An alert box shows the text "Hello"

B. An alert box shows the text "myInput"

C. Nothing happens because myInput is undefined

D. A runtime error occurs

Solution

1. Step 1: Understand the template reference variable usage

   The #myInput variable refers to the input element. Accessing myInput.value gets the current text typed.

2. Step 2: Analyze the button click event

   Clicking the button calls alert(myInput.value), so it shows the input's current value.

3. Final Answer:

   An alert box shows the text "Hello" -> Option A

4. Quick Check:

   myInput.value alerts typed text [OK]

Hint: Template ref variable .value gets input content [OK]

Common Mistakes:

• Thinking myInput is a string instead of element reference
• Assuming myInput is undefined or inaccessible
• Expecting no action or error on click

4. Consider this template code:

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

And component code:

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

What is the problem here?

medium

A. The template reference variable should be declared with $ sign

B. userInput is not defined in the component class, causing an error

C. logValue() should be an arrow function

D. There is no problem; it works fine

Solution

1. Step 1: Identify scope of template reference variables

   Template reference variables exist only in the template, not in the component class.

2. Step 2: Check component method usage

   The method tries to access userInput directly, which is undefined in the class, causing an error.

3. Final Answer:

   userInput is not defined in the component class, causing an error -> Option B

4. Quick Check:

   Template refs not accessible in class directly [OK]

Hint: Template refs only work inside template, not class methods [OK]

Common Mistakes:

• Trying to use template refs inside component class directly
• Thinking template refs need $ or other symbols
• Assuming arrow functions fix scope issues

5. How can you use a template reference variable to reset an input field's value to empty when clicking a button?

<input #myInput type="text">
<button (click)="???">Reset</button>

Which is the correct replacement for ????

hard

A. this.myInput.value = ''

B. myInput.reset()

C. reset(myInput)

D. myInput.value = ''

Solution

1. Step 1: Understand template reference variable usage in event binding

   You can directly access the element via the variable and set its properties in the template expression.

2. Step 2: Choose the correct syntax to clear input value

   Setting myInput.value = '' clears the input. Using this or calling reset() method is incorrect here.

3. Final Answer:

   myInput.value = '' -> Option D

4. Quick Check:

   Directly assign empty string to .value to reset [OK]

Hint: Assign empty string to .value on template ref to clear input [OK]

Common Mistakes:

• Using this.myInput which is undefined in template
• Calling reset() which input element does not have
• Trying to call a function reset() without defining it