HttpClient

API reference for Angular’s HttpClient service for making HTTP requests

The HttpClient service is Angular’s primary interface for making HTTP requests. It provides methods for all common HTTP operations and returns RxJS Observables for handling asynchronous responses.

Class Definition

class HttpClient {
  request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
  request(method: string, url: string, options?: {...}): Observable<any>;
  
  delete(url: string, options?: {...}): Observable<any>;
  get(url: string, options?: {...}): Observable<any>;
  head(url: string, options?: {...}): Observable<any>;
  jsonp<T>(url: string, callbackParam: string): Observable<T>;
  options(url: string, options?: {...}): Observable<any>;
  patch(url: string, body: any, options?: {...}): Observable<any>;
  post(url: string, body: any, options?: {...}): Observable<any>;
  put(url: string, body: any, options?: {...}): Observable<any>;
}

Importing

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

class MyService {
  private http = inject(HttpClient);
}

Methods

request()

Constructs an observable for a generic HTTP request.

Basic Request

const req = new HttpRequest('GET', '/api/heroes');
this.http.request(req).subscribe(event => {
  console.log(event);
});

method · string · required

HTTP method (GET, POST, PUT, DELETE, etc.)

url · string · required

The endpoint URL

options · object

Configuration options for the request

Show Options

body · any

Request body

headers · HttpHeaders | object

HTTP headers

params · HttpParams | object

URL query parameters

observe · 'body' | 'events' | 'response' · default: "'body'"

What to observe in the response

responseType · 'json' | 'text' | 'blob' | 'arraybuffer' · default: "'json'"

Expected response format

reportProgress · boolean · default: "false"

Whether to report progress events

withCredentials · boolean · default: "false"

Whether to send credentials (cookies)

context · HttpContext

Request context for passing data to interceptors

timeout · number

Request timeout in milliseconds

return · Observable<any>

An Observable of the HTTP response

get()

Constructs a GET request that interprets the body as JSON by default.

Basic GET

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

url · string · required

The endpoint URL

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response body (type T)

post()

Constructs a POST request that sends data to the server.

Basic POST

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

this.http.post('/api/heroes', newHero)
  .subscribe(result => console.log(result));

url · string · required

The endpoint URL

body · any · required

The content to post

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response body (type T)

put()

Constructs a PUT request that replaces a resource on the server.

Basic PUT

const updatedHero = { id: 1, name: 'Iron Man' };

this.http.put('/api/heroes/1', updatedHero)
  .subscribe(result => console.log(result));

url · string · required

The endpoint URL

body · any · required

The content to update

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response body (type T)

patch()

Constructs a PATCH request that partially updates a resource on the server.

Basic PATCH

const partialUpdate = { name: 'Captain America' };

this.http.patch('/api/heroes/1', partialUpdate)
  .subscribe(result => console.log(result));

url · string · required

The endpoint URL

body · any · required

The content to patch

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response body (type T)

delete()

Constructs a DELETE request that removes a resource from the server.

Basic DELETE

this.http.delete('/api/heroes/1')
  .subscribe(() => console.log('Deleted'));

url · string · required

The endpoint URL

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response body (type T)

head()

Constructs a HEAD request that retrieves only headers without the body.

Basic HEAD

this.http.head('/api/heroes', { observe: 'response' })
  .subscribe(response => {
    console.log('Content-Type:', response.headers.get('Content-Type'));
    console.log('Content-Length:', response.headers.get('Content-Length'));
  });

url · string · required

The endpoint URL

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response (typically used with observe: ‘response’)

options()

Constructs an OPTIONS request that retrieves supported HTTP methods.

this.http.options('/api/heroes', { observe: 'response' })
  .subscribe(response => {
    const allowedMethods = response.headers.get('Allow');
    console.log('Allowed methods:', allowedMethods);
  });

url · string · required

The endpoint URL

options · object

Configuration options (see request() method)

return · Observable<T>

An Observable of the response

jsonp()

Constructs a JSONP request for cross-domain requests.

this.http.jsonp('https://api.example.com/data', 'callback')
  .subscribe(data => {
    console.log('JSONP data:', data);
  });

JSONP requires the provideHttpClient() to be configured with withJsonpSupport().

url · string · required

The endpoint URL

callbackParam · string · required

The callback query parameter name

return · Observable<T>

An Observable of the response body (type T)

Usage Notes

Type Safety

Use TypeScript generics to ensure type safety:

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

// TypeScript knows that 'user' is of type User
this.http.get<User>('/api/user/1')
  .subscribe(user => {
    console.log(user.email); // Type-safe access
  });

Response Type Variations

The return type varies based on the observe and responseType options:

// Returns Observable<T> (body only)
this.http.get<T>('/api/data');

// Returns Observable<HttpResponse<T>> (full response)
this.http.get<T>('/api/data', { observe: 'response' });

// Returns Observable<HttpEvent<T>> (all events)
this.http.get<T>('/api/data', { observe: 'events' });

// Returns Observable<string> (text response)
this.http.get('/api/data', { responseType: 'text' });

// Returns Observable<Blob> (blob response)
this.http.get('/api/data', { responseType: 'blob' });

// Returns Observable<ArrayBuffer> (arraybuffer response)
this.http.get('/api/data', { responseType: 'arraybuffer' });

Progress Tracking

Track upload and download progress:

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

this.http.post('/api/upload', fileData, {
  reportProgress: true,
  observe: 'events'
}).subscribe(event => {
  if (event.type === HttpEventType.UploadProgress) {
    const progress = Math.round(100 * event.loaded / event.total!);
    console.log(`Upload progress: ${progress}%`);
  } else if (event.type === HttpEventType.Response) {
    console.log('Upload complete:', event.body);
  }
});

Error Handling

Handle errors using RxJS operators:

import { catchError, retry } from 'rxjs/operators';
import { throwError } from 'rxjs';

this.http.get<Hero[]>('/api/heroes')
  .pipe(
    retry(3), // Retry up to 3 times
    catchError(error => {
      console.error('Error:', error);
      return throwError(() => new Error('Failed to load heroes'));
    })
  )
  .subscribe(heroes => {
    console.log(heroes);
  });

See Also

HTTP Overview

Introduction to Angular’s HTTP client

HttpInterceptor

Intercept and transform HTTP requests

Related Types

• HttpRequest - Represents an HTTP request
• HttpResponse - Represents an HTTP response
• HttpHeaders - Represents HTTP headers
• HttpParams - Represents HTTP URL parameters
• HttpEvent - Union type for HTTP events
• HttpErrorResponse - Represents an HTTP error response