HTTP Client Overview

Introduction to Angular’s HTTP client for making HTTP requests and handling responses

Angular’s HTTP client provides a simplified API for HTTP functionality in your applications. It’s built on top of the browser’s native fetch or XMLHttpRequest APIs and provides a streamlined way to communicate with backend services.

Key Features

• Observable-based API: All HTTP methods return RxJS Observables for powerful async operations
• Request and response interceptors: Transform requests and responses globally
• Typed request and response objects: Full TypeScript support with generic types
• Streamlined error handling: Structured error responses
• Testability: Built-in testing utilities for mocking HTTP requests
• Progress events: Track upload and download progress
• Request cancellation: Cancel in-flight requests when needed

Getting Started

Import HttpClient

To use the HTTP client, you need to import HttpClient and configure it in your application:

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

@Component({
  selector: 'app-hero-list',
  template: `...`
})
export class HeroListComponent {
  private http = inject(HttpClient);
  
  getHeroes() {
    return this.http.get<Hero[]>('/api/heroes');
  }
}

Provide HTTP Client

In your application configuration, provide the HTTP client:

import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ]
});

Making Requests

The HttpClient service provides methods for all common HTTP verbs:

• get() - Retrieve data from a server
• post() - Send data to create a resource
• put() - Send data to update a resource
• patch() - Send data to partially update a resource
• delete() - Delete a resource
• head() - Retrieve headers only
• options() - Retrieve supported HTTP methods
• jsonp() - Make JSONP requests

Basic GET Request

interface Hero {
  id: number;
  name: string;
}

this.http.get<Hero[]>('/api/heroes')
  .subscribe(heroes => {
    console.log('Heroes:', heroes);
  });

POST Request with Body

const newHero = { name: 'Spider-Man' };

this.http.post<Hero>('/api/heroes', newHero)
  .subscribe(hero => {
    console.log('Created hero:', hero);
  });

Request Options

All HTTP methods accept an options object to customize the request:

this.http.get<Hero[]>('/api/heroes', {
  headers: { 'Authorization': 'Bearer token123' },
  params: { active: 'true' },
  responseType: 'json',
  observe: 'response',
  withCredentials: true
});

headers · HttpHeaders | object

HTTP headers to send with the request

params · HttpParams | object

URL query parameters

responseType · 'json' | 'text' | 'blob' | 'arraybuffer'

Expected response format (defaults to ‘json’)

observe · 'body' | 'response' | 'events'

What to observe in the response (defaults to ‘body’)

withCredentials · boolean

Whether to send credentials (cookies) with the request

reportProgress · boolean

Whether to report upload/download progress events

Response Types

By default, HttpClient assumes JSON responses, but you can specify other types:

JSON Response (default)

interface Config {
  apiUrl: string;
}

this.http.get<Config>('/api/config')
  .subscribe(config => {
    console.log('API URL:', config.apiUrl);
  });

Text Response

this.http.get('/api/textfile', { responseType: 'text' })
  .subscribe(text => {
    console.log('File contents:', text);
  });

Blob Response

this.http.get('/api/image.png', { responseType: 'blob' })
  .subscribe(blob => {
    const url = URL.createObjectURL(blob);
    // Use the blob URL
  });

Observing Responses

Control what part of the response you want to observe:

Body Only (default)

this.http.get<Hero[]>('/api/heroes')
  .subscribe(heroes => {
    // heroes is the response body
  });

Full Response

this.http.get<Hero[]>('/api/heroes', { observe: 'response' })
  .subscribe(response => {
    console.log('Status:', response.status);
    console.log('Headers:', response.headers);
    console.log('Body:', response.body);
  });

All Events

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

this.http.get('/api/data', { observe: 'events', reportProgress: true })
  .subscribe(event => {
    if (event.type === HttpEventType.DownloadProgress) {
      console.log(`Downloaded ${event.loaded} of ${event.total} bytes`);
    } else if (event.type === HttpEventType.Response) {
      console.log('Complete:', event.body);
    }
  });

Error Handling

Handle HTTP errors using RxJS operators:

import { catchError, of } from 'rxjs';

this.http.get<Hero[]>('/api/heroes')
  .pipe(
    catchError(error => {
      console.error('Error loading heroes:', error);
      return of([]); // Return empty array as fallback
    })
  )
  .subscribe(heroes => {
    console.log('Heroes:', heroes);
  });

HTTP Headers

Work with HTTP headers using the HttpHeaders class:

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

const headers = new HttpHeaders()
  .set('Authorization', 'Bearer token123')
  .set('Content-Type', 'application/json');

this.http.get('/api/data', { headers })
  .subscribe(data => console.log(data));

Note: HttpHeaders is immutable, so set() returns a new instance.

URL Parameters

Add query parameters using HttpParams or a plain object:

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

// Using HttpParams
const params = new HttpParams()
  .set('page', '1')
  .set('limit', '10');

this.http.get('/api/heroes', { params })
  .subscribe(heroes => console.log(heroes));

// Using plain object
this.http.get('/api/heroes', { 
  params: { page: '1', limit: '10' } 
})
  .subscribe(heroes => console.log(heroes));

Request Cancellation

Cancel in-flight requests by unsubscribing:

const subscription = this.http.get('/api/data')
  .subscribe(data => console.log(data));

// Cancel the request
subscription.unsubscribe();

Related APIs

HttpClient

Complete API reference for the HttpClient service

HttpInterceptor

Intercept and transform HTTP requests and responses

See Also

• HTTP Guide
• HttpRequest
• HttpResponse
• HttpHeaders
• HttpParams