@ViewChild decorator usage in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the @ViewChild decorator from Angular core.

Angular

import { [1] } from '@angular/core';

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

AViewChild

BComponent

CNgModule

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Component instead of @ViewChild

Forgetting to import @ViewChild

Importing from wrong Angular package

The @ViewChild decorator is imported from '@angular/core' to access child components or elements.

2fill in blank

medium

Complete the code to declare a @ViewChild property named 'myInput' that references a template variable 'inputRef'.

Angular

@ViewChild('[1]') myInput: ElementRef;

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

ArefInput

BmyInput

CinputRef

DinputElement

Attempts:

3 left

💡 Hint

Common Mistakes

Using the property name instead of the template variable

Missing quotes around the variable name

Using a wrong variable name

The string passed to @ViewChild must match the template variable name to get the reference.

3fill in blank

hard

Fix the error in the @ViewChild declaration to correctly get a reference to a child component named ChildComponent.

Angular

@ViewChild([1]) childComp!: ChildComponent;

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

AChildComponent

B'ChildComponent'

CchildComp

D'childComp'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing component name as a string instead of class

Using the property name instead of the class

Adding quotes around the class name

When referencing a component class, pass the class name without quotes to @ViewChild.

4fill in blank

hard

Fill both blanks to declare a @ViewChild property that reads the native element of a template variable 'myDiv'.

Angular

@ViewChild('[1]', { [2]: true }) myDivRef!: ElementRef;

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

AmyDiv

Bstatic

Cread

DelementRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'read' instead of 'static' in the options

Using wrong template variable name

Omitting the options object

The first blank is the template variable name. The second blank is the 'static' option to control when the query resolves.

5fill in blank

hard

Fill all three blanks to declare a @ViewChild property that reads the native element of a template variable 'header' with static query enabled.

Angular

@ViewChild('[1]', { [2]: true, [3]: ElementRef }) headerRef!: ElementRef;

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

Aheader

Bstatic

Cread

DmyHeader

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'static' and 'read' options

Using wrong template variable name

Omitting the 'read' option when needed

The first blank is the template variable name 'header'. The second blank is the 'static' option set to true. The third blank is the 'read' option specifying ElementRef.