You have a nested object data = { user: { profile: null } }. How can you safely display the city property inside profile in the template without errors?

hard📝 component behavior Q8 of 15

Angular - Templates and Data Binding

You have a nested object data = { user: { profile: null } }. How can you safely display the city property inside profile in the template without errors?

A{{ data?.user?.profile.city }}

B}} ytic.eliforp.?resu.?atad {{

C{{ data.user?.profile.city }}

D{{ data.user.profile?.city }}

Step-by-Step Solution

Solution:

Step 1: Identify which properties might be null
Only profile is null, so safe navigation is needed before city.
Step 2: Check each option for correct safe navigation
{{ data.user.profile?.city }} safely accesses profile?.city assuming data.user exists.
Final Answer:
{{ data.user.profile?.city }} -> Option D
Quick Check:
Safe navigation before possibly null property = correct [OK]

Quick Trick: Place ?. before property that can be null only [OK]

Common Mistakes:

Adding unnecessary ?. operators
Missing ?. before null property
Misplacing ?. causing errors

Master "Templates and Data Binding" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

You have a nested object data = { user: { profile: null } }. How can you safely display the city property inside profile in the template without errors?

Step 1: Identify which properties might be null

Step 2: Check each option for correct safe navigation

Final Answer:

Quick Check:

Want More Practice?