[Solved] Consider this Angular template:<div *ngIf="user.isLoggedIn">Hello, {{user.name}}!</div>But the app crashes with an error: Cannot read property 'isLoggedIn' of undefined. What is the best fix? | Angular

Angular - Directives

Consider this Angular template:

<div *ngIf="user.isLoggedIn">Hello, {{user.name}}!</div>

But the app crashes with an error: Cannot read property 'isLoggedIn' of undefined. What is the best fix?

ARemove the *ngIf directive completely.

BChange to <code>*ngIf="user?.isLoggedIn"</code> to safely check property.

CInitialize <code>user</code> as an empty object in the component.

DUse <code>*ngIf="user.isLoggedIn === true"</code> instead.

Step-by-Step Solution

Solution:

Step 1: Identify cause of error
The error occurs because user is undefined when Angular tries to read user.isLoggedIn.
Step 2: Use safe navigation operator
Using user?.isLoggedIn prevents error by checking if user exists before accessing isLoggedIn.
Final Answer:
Change to *ngIf="user?.isLoggedIn" to safely check property. -> Option B
Quick Check:
Use ? to avoid errors on undefined objects [OK]

Quick Trick: Use ?. to safely access nested properties [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Consider this Angular template: