Template reference for direct access in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a template reference variable named 'inputRef'.

Angular

<input type="text" [1]>

Drag options to blanks, or click blank then click option'

A@inputRef

B*inputRef

C$inputRef

D#inputRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' or '@' instead of '#' to declare the reference variable.

Forgetting the '#' symbol.

In Angular templates, a template reference variable is declared using the '#' symbol followed by the variable name.

2fill in blank

medium

Complete the code to bind the input's value to a paragraph using the template reference variable 'inputRef'.

Angular

<input type="text" #inputRef>
<p>{{ [1].value }}</p>

Drag options to blanks, or click blank then click option'

AinputValue

BinputRef

Cinput

DrefInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the declared template reference.

Trying to access the value without the '.value' property.

The template reference variable 'inputRef' can be used directly in interpolation to access the input's properties like 'value'.

3fill in blank

hard

Fix the error in the button click event to log the input's value using the template reference variable 'myInput'.

Angular

<input type="text" #myInput>
<button (click)="logValue([1])">Log</button>

Drag options to blanks, or click blank then click option'

AmyInput.value

BmyInput

CmyInput.getValue()

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole input element instead of its value.

Using a method 'getValue()' which does not exist.

To get the input's current value, use 'myInput.value' inside the event binding.

4fill in blank

hard

Fill both blanks to create a template reference variable 'box' and use it to set the paragraph text.

Angular

<input type="text" [1]>
<p>{{ [2].value }}</p>

Drag options to blanks, or click blank then click option'

A#box

Bbox

CinputBox

D#inputBox

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' inside interpolation.

Using different names for declaration and usage.

Declare the template reference variable with '#box' and use 'box' inside interpolation to access its value.

5fill in blank

hard

Fill all three blanks to declare a template reference 'userInput', bind its value to a span, and use it in a button click event.

Angular

<input type="text" [1]>
<span>{{ [2].value }}</span>
<button (click)="submit([3].value)">Submit</button>

Drag options to blanks, or click blank then click option'

A#userInput

BuserInput

D#inputUser

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable names between declaration and usage.

Using '#' inside interpolation or event binding.

Declare the template reference with '#userInput', use 'userInput' inside interpolation and event binding to access the input's value.

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