How to Use HttpClient in Angular: Simple Guide with Example

In Angular, use HttpClient from @angular/common/http to make HTTP requests by injecting it into your component or service. Call methods like get(), post(), etc., which return Observables you subscribe to for handling responses.

Syntax

The HttpClient service is imported from @angular/common/http. You inject it into your component or service constructor. Use methods like get(), post(), put(), and delete() to make HTTP calls. These methods return Observable objects that you subscribe to for the response.

• import: Bring HttpClient into your file.
• constructor injection: Add private http: HttpClient to constructor.
• http.get(): Make a GET request.
• subscribe(): Listen for the response.

typescript

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

@Component({
  selector: 'app-example',
  template: ''
})
export class ExampleComponent {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      console.log(response);
    });
  }
}

Example

This example shows a simple Angular component that uses HttpClient to fetch data from a public API and display it in the template. It demonstrates importing the module, injecting the service, making a GET request, and handling the response.

typescript

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h1>Users</h1>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class AppComponent {
  users: any[] = [];

  constructor(private http: HttpClient) {
    this.loadUsers();
  }

  loadUsers() {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
      .subscribe(data => {
        this.users = data;
      });
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Output

<h1>Users</h1>
<ul>
  <li>Leanne Graham</li>
  <li>Ervin Howell</li>
  <li>Clementine Bauch</li>
  <li>Patricia Lebsack</li>
  <li>Chelsey Dietrich</li>
  <li>Mrs. Dennis Schulist</li>
  <li>Kurtis Weissnat</li>
  <li>Nicholas Runolfsdottir V</li>
  <li>Glenna Reichert</li>
  <li>Clementina DuBuque</li>
</ul>

Common Pitfalls

Common mistakes when using HttpClient include:

• Not importing HttpClientModule in your app module, causing injection errors.
• Forgetting to subscribe to the Observable, so the HTTP request never runs.
• Not handling errors, which can cause the app to fail silently.
• Using any type instead of proper interfaces for response data, losing type safety.

typescript

/* Wrong: Missing HttpClientModule import */
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule], // HttpClientModule missing here
  bootstrap: [AppComponent]
})
export class AppModule {}

/* Right: Include HttpClientModule */
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Quick Reference

Here is a quick summary of key HttpClient methods and usage tips:

Method	Description	Returns
get(url, options?)	Fetch data from the server	Observable of response body
post(url, body, options?)	Send data to the server	Observable of response body
put(url, body, options?)	Update data on the server	Observable of response body
delete(url, options?)	Delete data from the server	Observable of response body
subscribe()	Listen to the Observable to get data or errors	Subscription

Key Takeaways

Always import HttpClientModule in your app module to use HttpClient.

Inject HttpClient in your component or service constructor to make HTTP calls.

Use HttpClient methods like get() and post() which return Observables you must subscribe to.

Handle errors in your subscription to avoid silent failures.

Use proper TypeScript types for response data to keep your code safe and clear.