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.