Skip to main content
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. 
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
​
return
Observable<any>
An Observable of the HTTP response

​
get()

Constructs a GET request that interprets the body as JSON by default. 
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. 
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. 
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. 
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. 
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)
Constructs a HEAD request that retrieves only headers without the body. 
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

Build docs developers (and LLMs) love

Get started for freeTalk to us