Handling HTTP errors in Angular - Mini Project: Build & Apply

Handling HTTP errors

📖 Scenario: You are building a simple Angular app that fetches user data from a server. Sometimes the server might return an error, like a 404 or 500. You want to handle these HTTP errors gracefully so the app can show a friendly message instead of crashing.

🎯 Goal: Create an Angular standalone component that fetches user data using HttpClient. Add error handling to catch HTTP errors and store an error message in a signal. Display the error message in the template if an error occurs.

📋 What You'll Learn

Use Angular 17+ standalone component with signals

Inject HttpClient using inject()

Create a signal to hold the user data

Create a signal to hold the error message

Use HttpClient.get() to fetch data from 'https://jsonplaceholder.typicode.com/users/1'

Use subscribe() with error callback to handle HTTP errors

Display user name if data loads successfully

Display error message if an error occurs

💡 Why This Matters

🌍 Real World

Handling HTTP errors is essential in real apps to provide good user experience and avoid crashes when servers fail or data is missing.

💼 Career

Knowing how to handle HTTP errors in Angular is a key skill for frontend developers working with APIs and building robust web applications.

1

DATA SETUP: Create a standalone Angular component with signals

Create a standalone Angular component called UserComponent. Inside it, create two signals: user initialized to null and errorMessage initialized to an empty string ''. Import necessary Angular modules and functions.

Angular

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

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `
})
export class UserComponent {
  // Your code here
}

Need a hint?

Use signal(null) for user and signal('') for errorMessage.

2

CONFIGURATION: Inject HttpClient to make HTTP requests

Import HttpClientModule and HttpClient from @angular/common/http. Add HttpClientModule to the component's imports array. Inside the component class, create a private variable http by calling inject(HttpClient).

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);
  // Your code here
}

Need a hint?

Remember to add HttpClientModule to imports and use inject(HttpClient) inside the class.

3

CORE LOGIC: Fetch user data and handle HTTP errors

Inside the UserComponent constructor, use this.http.get() to fetch data from 'https://jsonplaceholder.typicode.com/users/1'. Subscribe to the observable. In the success callback, update the user signal with the response. In the error callback, update the errorMessage signal with the string 'Failed to load user data.'.

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);

  constructor() {
    // Use this.http.get() to fetch user data and handle errors
    // Your code here
  }
}

Need a hint?

Use subscribe with next and error callbacks to update signals.

4

COMPLETION: Display user name or error message in the template

Update the component's template to show the user's name if user() is not null. If errorMessage() is not empty, display the error message inside a <div> with role="alert" for accessibility.

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
    
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);

  constructor() {
    this.http.get('https://jsonplaceholder.typicode.com/users/1').subscribe({
      next: (data) => this.user.set(data),
      error: () => this.errorMessage.set('Failed to load user data.')
    });
  }
}

Need a hint?

Use Angular's *ngIf to conditionally show user name or error message. Add role="alert" for accessibility on the error message.