Safe navigation operator for null in Angular - Mini Project: Build & Apply

Safe Navigation Operator for Null in Angular

📖 Scenario: You are building a simple Angular component that displays user profile information. Sometimes, the user data might not be fully loaded, so some properties could be null or undefined.

🎯 Goal: Create an Angular standalone component that safely displays the user's name and email using the safe navigation operator ?. to avoid errors when the user data is null or undefined.

📋 What You'll Learn

Create a user object with name and email properties

Add a boolean variable isUserLoaded to control if user data is available

Use the safe navigation operator ?. in the template to display user properties safely

Add a button to toggle isUserLoaded and show/hide user data

💡 Why This Matters

🌍 Real World

In real web apps, data often loads asynchronously and might be missing or null. Using the safe navigation operator helps avoid errors when accessing such data in Angular templates.

💼 Career

Understanding how to safely access possibly null or undefined data in Angular is essential for building robust user interfaces and avoiding runtime errors.

1

Create the user data object

Create a standalone Angular component named UserProfileComponent. Inside the component class, create a variable called user with properties name set to 'Alice' and email set to '[e-mail]'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
})
export class UserProfileComponent {
  // Create user object with name and email
  // Your code here
}

Need a hint?

Define a variable user inside the component class with the exact properties and values.

2

Add a boolean to control user data availability

Inside the UserProfileComponent class, add a boolean variable called isUserLoaded and set it to true.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
})
export class UserProfileComponent {
  user = { name: 'Alice', email: '[e-mail]' };
  // Add isUserLoaded boolean variable
  // Your code here
}

Need a hint?

Add a boolean variable isUserLoaded and set it to true.

3

Use safe navigation operator in the template

In the component's template, use Angular interpolation to display the user's name and email. Use the safe navigation operator ?. to access user.name and user.email. Also, use an *ngIf directive to show the user info only if isUserLoaded is true.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    
    
  `,
})
export class UserProfileComponent {
  user = { name: 'Alice', email: '[e-mail]' };
  isUserLoaded = true;
}

Need a hint?

Use *ngIf="isUserLoaded" on a container element and display {{ user?.name }} and {{ user?.email }} inside.

4

Add a button to toggle user data visibility

Add a button in the template with the text Toggle User Data. When clicked, it should toggle the value of isUserLoaded between true and false using an Angular event binding.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    
      Name: {{ user?.name }}
      Email: {{ user?.email }}
    
    
    
  `,
})
export class UserProfileComponent {
  user = { name: 'Alice', email: '[e-mail]' };
  isUserLoaded = true;
}

Need a hint?

Add a button with a click event that toggles isUserLoaded using (click)="isUserLoaded = !isUserLoaded".