Safe navigation operator for null in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular template render?

Given the component property user = null, what will the template output?

<div>Name: {{ user?.name }}</div>

A Throws an error

B Name: null

C Name:

D Name: undefined

💡 Hint

The safe navigation operator prevents errors when accessing properties of null or undefined.

The safe navigation operator (?.) returns undefined if the object is null or undefined, so the interpolation renders an empty string.

📝 Syntax

intermediate

Which template syntax correctly uses the safe navigation operator?

Select the option that correctly uses the safe navigation operator to access profile.age safely.

A {{ profile?.age }}

B {{ profile.age? }}

C {{ profile?.age? }}

D {{ ?profile.age }}

💡 Hint

The safe navigation operator is placed between the object and property.

Only option A uses the correct syntax: object?.property.

🔧 Debug

advanced

Why does this Angular template throw an error?

Given data = null, why does this template cause an error?

<div>Value: {{ data.value.length }}</div>

A Because data is null and accessing value causes a runtime error

B Because length is not a property of value

C Because Angular does not support property access in templates

D Because data.value is undefined but length is accessed safely

💡 Hint

Accessing a property of null causes an error.

Since data is null, accessing data.value throws an error before length is checked.

❓ state_output

advanced

What is the output of this Angular component template?

Component code:

user = { name: 'Anna', address: null };

Template:

<div>City: {{ user.address?.city || 'Unknown' }}</div>

A City:

B City: Unknown

C City: null

D Throws an error

💡 Hint

Safe navigation returns undefined if address is null, so the OR operator applies.

user.address is null, so user.address?.city is undefined, triggering the fallback 'Unknown'.

🧠 Conceptual

expert

What is the main benefit of using the safe navigation operator in Angular templates?

Choose the best explanation for why Angular developers use the safe navigation operator (?.) in templates.

A It improves performance by caching property values.

B It automatically initializes null objects to empty objects.

C It converts null values to empty strings in the UI.

D It prevents runtime errors by safely accessing properties on null or undefined objects.

💡 Hint

Think about what happens if you try to access a property of null.

The safe navigation operator avoids errors by returning undefined instead of throwing when the object is null or undefined.