Requesting Data with HttpClient

Angular's HttpClient provides a typed, Observable-based API for making HTTP requests.

Enabling HttpClient

import { provideHttpClient } from '@angular/common/http';

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

Making a GET Request

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

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

@Component({
  selector: 'app-user-list',
  template: `
    <p *ngFor="let user of users$ | async">{{ user.name }}</p>
  `,
})
export class UserListComponent implements OnInit {
  private http = inject(HttpClient);
  users$!: Observable<User[]>;

  ngOnInit(): void {
    this.users$ = this.http.get<User[]>('/api/users');
  }
}

HttpClient Methods

Cold Observables

HttpClient methods return cold Observables — nothing happens until you subscribe:

// No request is made yet
const users$ = this.http.get<User[]>('/api/users');

// Still no request
const users2$ = this.http.get<User[]>('/api/users');

// Request happens on subscribe
users$.subscribe(users => console.log(users));

// Each subscribe triggers a new request
users$.subscribe(users => console.log('Again:', users));

HttpClient is generic, providing compile-time type checking on response bodies.

Typing Responses

// Typed response
this.http.get<User[]>('/api/users').subscribe(users => {
  users.forEach(user => console.log(user.name)); // string — type safe
});

// Single object
this.http.get<User>('/api/users/1').subscribe(user => {
  console.log(user.email); // string — type safe
});

// Custom response shape
interface ApiResponse<T> {
  data: T;
  total: number;
  page: number;
}

this.http.get<ApiResponse<User[]>>('/api/users').subscribe(response => {
  console.log(response.data);    // User[]
  console.log(response.total);   // number
  console.log(response.page);    // number
});

Error Handling with catchError

import { catchError, throwError } from 'rxjs';

this.http.get<User[]>('/api/users').pipe(
  catchError(error => {
    console.error('Failed to load users:', error.message);
    return throwError(() => new Error('Failed to load users'));
  })
).subscribe();

Using async Pipe in Templates

<!-- Subscribe and unsubscribe automatically -->
<div *ngIf="users$ | async as users">
  <p *ngFor="let user of users">{{ user.name }}</p>
</div>

<!-- With loading state -->
<div *ngIf="users$ | async as users; else loading">
  <p *ngFor="let user of users">{{ user.name }}</p>
</div>
<ng-template #loading><p>Loading...</p></ng-template>