Angular HTTP Client — Fetch Data from APIs (Angular 21+)

This lesson teaches the Angular HTTP client — how services fetch JSON from REST APIs and expose data to components. Angular 21 uses provideHttpClient() with fetch support and integrates cleanly with RxJS or signals at the boundary.

Prerequisites: Lessons 1–5. Estimated time: 45–55 minutes.

1. Enable HttpClient

In app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch()),
  ],
};

withFetch() uses the browser Fetch API under the hood — recommended for new Angular 21 apps.

2. Create an API Service

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserApi {
  private readonly http = inject(HttpClient);
  private readonly base = 'https://jsonplaceholder.typicode.com';

  list(): Observable<User[]> {
    return this.http.get<User[]>(`${this.base}/users`);
  }
}

3. Display Data in a Component

import { Component, inject, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { UserApi } from '../services/user-api';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    @if (users(); as list) {
      <ul>
        @for (user of list; track user.id) {
          <li>{{ user.name }} — {{ user.email }}</li>
        }
      </ul>
    } @else {
      <p>Loading users…</p>
    }
  `,
})
export class UserList {
  private readonly api = inject(UserApi);
  users = toSignal(this.api.list(), { initialValue: null });
}

toSignal bridges RxJS observables to template-friendly signals — a common Angular 21 pattern.

4. Error Handling

import { catchError, of } from 'rxjs';

this.http.get<User[]>(url).pipe(
  catchError(() => of([])),
);

For production apps, add interceptors for auth tokens and global error toasts — covered in munonye.com full-stack tutorials.

5. Next Steps

Continue to Lesson 7 — Forms to capture user input and POST data back to APIs.

Frequently Asked Questions

Does Angular 21 still use HttpClient?
Yes. @angular/common/http remains the standard; withFetch() modernizes the backend implementation.

Observable or signal for HTTP data?
Fetch with Observables in services; convert to signals with toSignal at the component boundary for templates.