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
}

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
}

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
}

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);
  }
}

Hint

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

Practice

1. What is the main purpose of showing a loading state in an Angular component?

easy

A. To automatically refresh the page after loading

B. To hide the entire component until data is loaded

C. To disable all user interactions permanently

D. To inform the user that data is being fetched and they should wait

Solution

1. Step 1: Understand loading state purpose

   Loading states are used to show users that data is being fetched and they need to wait.

2. Step 2: Analyze options

   Only "To inform the user that data is being fetched and they should wait" correctly describes this purpose. The other options describe incorrect or unrelated behaviors.

3. Final Answer:

   To inform the user that data is being fetched and they should wait -> Option D

4. Quick Check:

   Loading state = Inform user to wait [OK]

Hint: Loading states tell users to wait, not hide or disable [OK]

Common Mistakes:

• Thinking loading hides the component completely
• Assuming loading refreshes the page
• Believing loading disables all interactions permanently

2. Which Angular syntax correctly shows a loading message only when isLoading signal is true?

easy

A. <div *ngIf="isLoading()">Loading...</div>

B. <div *ngIf="isLoading">Loading...</div>

C. <div *ngIf="isLoading = true">Loading...</div>

D. <div *ngIf="isLoading == false">Loading...</div>

Solution

1. Step 1: Understand Angular signals usage

   Signals are functions, so to get their value, you call them like isLoading().

2. Step 2: Check each option

   <div *ngIf="isLoading()">Loading...</div> correctly calls isLoading(). <div *ngIf="isLoading">Loading...</div> treats it as a property, which is incorrect for signals. <div *ngIf="isLoading = true">Loading...</div> uses assignment inside *ngIf, which is invalid. <div *ngIf="isLoading == false">Loading...</div> checks for false, which is opposite of loading.

3. Final Answer:

   <div *ngIf="isLoading()">Loading...</div> -> Option A

4. Quick Check:

   Call signals with () in *ngIf [OK]

Hint: Call signals as functions with () inside *ngIf [OK]

Common Mistakes:

• Using signal name without ()
• Trying to assign inside *ngIf
• Checking wrong boolean condition

3. Given this Angular template snippet:

<div *ngIf="error()" role="alert">Error: {{ error() }}</div>
<div *ngIf="isLoading()">Loading...</div>
<div *ngIf="!isLoading() && !error()">Data loaded</div>

What will be displayed if isLoading() returns false and error() returns "Network error"?

medium

A. Loading...

B. Error: Network error

C. Data loaded

D. Nothing is displayed

Solution

1. Step 1: Evaluate conditions with given values

   isLoading() is false, error() is "Network error" (truthy).

2. Step 2: Check which *ngIf blocks show

   The first div shows if error() is truthy, so it displays "Error: Network error". The second div shows if isLoading() is true (false here), so no. The third div shows if not loading and no error, but error exists, so no.

3. Final Answer:

   Error: Network error -> Option B

4. Quick Check:

   Error present = show error message [OK]

Hint: Error message shows if error() is truthy, regardless of loading [OK]

Common Mistakes:

• Ignoring error() and showing loading
• Showing data loaded despite error
• Assuming nothing shows when error exists

4. Identify the error in this Angular component code snippet handling loading and error states:

export class DataComponent {
  isLoading = signal(false);
  error = signal(null);

  fetchData() {
    this.isLoading = true;
    fetch('/api/data')
      .then(() => this.isLoading = false)
      .catch(err => this.error = err.message);
  }
}

medium

A. fetchData does not set error to null before fetching

B. Missing async keyword on fetchData method

C. Signals are reassigned instead of updating their value

D. No return statement in fetchData

Solution

1. Step 1: Understand how to update signals

   Signals are objects with a method to update their value, not variables to reassign.

2. Step 2: Check code for signal updates

   The code does this.isLoading = true which reassigns the signal variable instead of calling this.isLoading.set(true). Same for error.

3. Final Answer:

   Signals are reassigned instead of updating their value -> Option C

4. Quick Check:

   Update signals with .set(), not reassignment [OK]

Hint: Use .set() to update signals, not direct assignment [OK]

Common Mistakes:

• Assigning signals directly instead of using .set()
• Forgetting to reset error before fetch
• Assuming async needed without await

5. You want to show a loading spinner while data loads, an error message if loading fails, and the data content otherwise. Which Angular template pattern correctly handles these states using signals isLoading(), error(), and data()?

hard

A. <div *ngIf="isLoading()">Loading spinner...</div>
<div *ngIf="error()" role="alert">Error: {{ error() }}</div>
<div *ngIf="!isLoading() && !error()">{{ data() }}</div>

B. <div *ngIf="!isLoading()">Loading spinner...</div>
<div *ngIf="error()">Error: {{ error() }}</div>
<div *ngIf="data()">{{ data() }}</div>

C. <div *ngIf="error()">Loading spinner...</div>
<div *ngIf="isLoading()">Error: {{ error() }}</div>
<div *ngIf="data()">{{ data() }}</div>

D. <div *ngIf="data()">Loading spinner...</div>
<div *ngIf="isLoading()">Error: {{ error() }}</div>
<div *ngIf="error()">{{ data() }}</div>

Solution

1. Step 1: Understand state priorities

   Loading state should show spinner first, then error if exists, then data if no loading or error.

2. Step 2: Analyze each template option

   <div *ngIf="isLoading()">Loading spinner...</div>
   <div *ngIf="error()" role="alert">Error: {{ error() }}</div>
   <div *ngIf="!isLoading() && !error()">{{ data() }}</div>

   correctly shows loading when isLoading() is true, error message if error() is truthy, and data only if not loading and no error. The other options mix conditions incorrectly or show wrong messages for states.

3. Final Answer:

   <pre><div *ngIf="isLoading()">Loading spinner...</div> <div *ngIf="error()" role="alert">Error: {{ error() }}</div> <div *ngIf="!isLoading() && !error()">{{ data() }}</div></pre> -> Option A

4. Quick Check:

   Loading > Error > Data display order [OK]

Hint: Show loading first, then error, then data with *ngIf [OK]

Common Mistakes:

• Showing data while still loading
• Displaying error message incorrectly
• Mixing up *ngIf conditions order