Template reference variables in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

<input type="text" [1]="inputRef">

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

A$

B*

C#

D@

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' instead of '#' to declare the variable.

Forgetting the symbol and just writing the variable name.

Using '@' or '$' which are not valid for template references.

In Angular templates, the '#' symbol is used to declare a template reference variable.

2fill in blank

medium

Complete the code to access the value of the input using the template reference variable 'inputRef'.

Angular

<button (click)="onClick([1].value)">Submit</button>

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

ArefInput

BinputRef

Cthis.inputRef

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this.inputRef' which is invalid in templates.

Using a different variable name than declared.

Using the element tag name instead of the reference variable.

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

3fill in blank

hard

Fix the error in the code to correctly bind the input value to the component method using the template reference variable 'myInput'.

Angular

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

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

AmyInput.value

BmyInput

CmyInput.text

DmyInput.input

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole element instead of its value.

Using incorrect property names like 'text' or 'input'.

To get the current value of the input element, use 'myInput.value'.

4fill in blank

hard

Fill both blanks to declare a template reference variable 'box' on a div and use it to change its background color on button click.

Angular

<div [1]="box" style="width:100px; height:100px;"></div>
<button (click)="box.style.backgroundColor = '[2]'">Change Color</button>

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

A#

B*

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' instead of '#' for the variable.

Using invalid color names or missing quotes.

Use '#' to declare the template reference variable and 'red' as the color to change the background.

5fill in blank

hard

Fill all three blanks to create a template reference variable 'inputBox', bind its value to a paragraph, and clear the input on button click.

Angular

<input type="text" [1]="inputBox">
<p>[2].value</p>
<button (click)="[3].value = ''">Clear</button>

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

A#

BinputBox

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' instead of '#' to declare the variable.

Using different variable names inconsistently.

Trying to clear the input with incorrect syntax.

Declare the variable with '#', then use 'inputBox' to access its value and clear it.