Safe navigation operator for null in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to safely access the name property of user.

Angular

<p>{{ user[1]name }}</p>

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

A.

B?.

C->

D::

Attempts:

3 left

💡 Hint

Common Mistakes

Using the normal dot operator causes errors if the object is null.

Using arrow or double colon operators which are not valid in Angular templates.

The safe navigation operator ?. prevents errors if user is null or undefined.

2fill in blank

medium

Complete the code to safely call the getAddress() method on customer.

Angular

<p>{{ customer[1]getAddress() }}</p>

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

A?.

B.

C::

D->

Attempts:

3 left

💡 Hint

Common Mistakes

Using the normal dot operator causes runtime errors if customer is null.

Using invalid operators like double colon or arrow.

The safe navigation operator ?. safely calls the method only if customer is not null.

3fill in blank

hard

Fix the error in safely accessing profile.email when profile might be null.

Angular

<p>{{ profile[1]email }}</p>

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

A->

B::

C.

D?.

Attempts:

3 left

💡 Hint

Common Mistakes

Using the normal dot operator causes errors if profile is null.

Trying to use unsupported operators.

Using ?. prevents errors if profile is null by safely accessing email.

4fill in blank

hard

Fill both blanks to safely access order.details.price when order or details might be null.

Angular

<p>{{ order[1]details[2]price }}</p>

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

A?.

B.

C::

D->

Attempts:

3 left

💡 Hint

Common Mistakes

Using normal dot operator causes errors if any object in the chain is null.

Mixing safe navigation with normal dot operator incorrectly.

Using ?. twice safely accesses nested properties even if order or details is null.

5fill in blank

hard

Fill all three blanks to safely access data.user.profile.email when any object might be null.

Angular

<p>{{ data[1]user[2]profile[3]email }}</p>

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

A.

B?.

C::

D->

Attempts:

3 left

💡 Hint

Common Mistakes

Using normal dot operator causes errors if any object is null.

Using unsupported operators like double colon or arrow.

Using the safe navigation operator ?. at each step prevents errors if any object is null.