Loading states and error patterns in Angular - Mini Project: Build & Apply

Loading states and error patterns

📖 Scenario: You are building a simple Angular component that fetches user data from a server. While the data is loading, you want to show a loading message. If there is an error fetching the data, you want to show an error message. Otherwise, you show the user data.

🎯 Goal: Create an Angular standalone component that uses signals to manage loading and error states. The component should display a loading message while fetching data, an error message if fetching fails, and the user data when successful.

📋 What You'll Learn

Create a signal to hold the user data

Create signals to track loading and error states

Use Angular's *@if control flow directive to show loading, error, or data

Simulate data fetching with a function that sets loading and error states

💡 Why This Matters

🌍 Real World

Loading states and error handling are essential in real apps to improve user experience when waiting for data or handling failures.

💼 Career

Understanding how to manage loading and error states with Angular signals and templates is a common task for frontend developers working with Angular.

1

Setup user data signal

Create a standalone Angular component called UserProfileComponent. Inside it, create a signal called user initialized to null to hold the user data.

Angular

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

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

Need a hint?

Use signal(null) to create a signal for user data.

2

Add loading and error signals

Inside UserProfileComponent, add two more signals: loading initialized to false and error initialized to null to track loading and error states.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
})
export class UserProfileComponent {
  user = signal(null);
  // Add loading and error signals below
  // Your code here
}

Need a hint?

Use signal(false) for loading and signal(null) for error.

3

Add fetchUser function with loading and error logic

Inside UserProfileComponent, add a method called fetchUser(). It should set loading to true, error to null, then simulate fetching user data by using setTimeout. After 2 seconds, set user to { name: 'Alice', age: 30 } and loading to false. If you want, simulate an error by setting error to 'Failed to load user' and loading to false instead of setting user data.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: ``,
})
export class UserProfileComponent {
  user = signal(null);
  loading = signal(false);
  error = signal(null);

  // Add fetchUser method below
  // Your code here
}

Need a hint?

Use setTimeout to simulate delay. Use this.loading.set(true) and this.error.set(null) before delay. After delay, set user data and loading false.

4

Add template with loading, error, and user display

In the component template, use Angular's *@if directive to show:
1. A <p>Loading...</p> message when loading() is true.
2. A <p>Error: {{ error() }}</p> message when error() is not null.
3. A <div> showing User: {{ user().name }}, Age: {{ user().age }} when user() is not null.
Also, add a button <button (click)="fetchUser()">Load User</button> to trigger data fetching.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `
    
  `,
})
export class UserProfileComponent {
  user = signal(null);
  loading = signal(false);
  error = signal(null);

  fetchUser() {
    this.loading.set(true);
    this.error.set(null);
    setTimeout(() => {
      // Simulate success:
      this.user.set({ name: 'Alice', age: 30 });
      this.loading.set(false);

      // To simulate error, comment above lines and uncomment below lines:
      // this.error.set('Failed to load user');
      // this.loading.set(false);
    }, 2000);
  }
}

Need a hint?

Use *@if to conditionally show loading, error, or user data. Add a button to call fetchUser().