Loading states and error patterns in Angular

Introduction

Loading states show users that data is being fetched or processed. Error patterns help users understand when something goes wrong and how to fix it.

When fetching data from a server and waiting for the response

When submitting a form and waiting for confirmation

When an operation might fail and you want to show a helpful message

When loading images or files that take time to appear

When you want to improve user experience by giving feedback during delays

Syntax

Angular

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

@Component({
  selector: 'app-loading-error',
  standalone: true,
  template: `
    <div *ngIf="loading()">Loading...</div>
    <div *ngIf="error()" role="alert">Error: {{ error() }}</div>
    <div *ngIf="!loading() && !error()">Data loaded successfully!</div>
  `
})
export class LoadingErrorComponent {
  loading = signal(true);
  error = signal<string | null>(null);

  constructor() {
    // Simulate data fetch
    setTimeout(() => {
      this.loading.set(false);
      // Uncomment next line to simulate error
      // this.error.set('Failed to load data');
    }, 2000);
  }
}

Use *ngIf to show or hide loading and error messages.

Use Angular signals or reactive variables to track loading and error states.

Examples

Show loading text while loading is true, and error message if error exists.

Angular

<div *ngIf="loading()">Loading...</div>
<div *ngIf="error()" role="alert">Error: {{ error() }}</div>

Use Angular signals to hold loading and error states reactively.

Angular

loading = signal(true);
error = signal<string | null>(null);

Simulate an error after 3 seconds by updating signals.

Angular

setTimeout(() => {
  loading.set(false);
  error.set('Network error');
}, 3000);

Sample Program

This Angular standalone component shows a loading message while data is fetched. After 2 seconds, it randomly shows either a success message or an error message. The user can click the reload button to try again. The error message uses role="alert" for accessibility, and loading uses aria-live="polite" to announce updates.

Angular

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

@Component({
  selector: 'app-loading-error',
  standalone: true,
  template: `
    <main>
      <h1>Data Fetch Example</h1>
      <div *ngIf="loading()" aria-live="polite">Loading data, please wait...</div>
      <div *ngIf="error()" role="alert" style="color: red;">Error: {{ error() }}</div>
      <div *ngIf="!loading() && !error()">Data loaded successfully!</div>
      <button (click)="reload()">Reload Data</button>
    </main>
  `
})
export class LoadingErrorComponent {
  loading = signal(true);
  error = signal<string | null>(null);

  constructor() {
    this.fetchData();
  }

  fetchData() {
    this.loading.set(true);
    this.error.set(null);
    setTimeout(() => {
      this.loading.set(false);
      // Simulate random error or success
      if (Math.random() < 0.5) {
        this.error.set('Failed to load data. Please try again.');
      }
    }, 2000);
  }

  reload() {
    this.fetchData();
  }
}

Important Notes

Always provide clear messages so users know what is happening.

Use ARIA roles like role="alert" for error messages to help screen readers.

Keep loading states visible until data is ready or an error occurs.

Summary

Loading states tell users to wait while data loads.

Error patterns show helpful messages when something goes wrong.

Use Angular signals and *ngIf to manage and display these states clearly.