HttpClientModule setup in Angular

Introduction

HttpClientModule lets your Angular app talk to servers to get or send data. It makes web requests easy and organized.

You want to fetch data from a website or API to show in your app.

You need to send user input or forms to a server.

You want to update or delete data on a server from your app.

You want to handle server responses like errors or success messages.

You want to keep your app data fresh by loading it from the internet.

Syntax

Angular

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

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule { }

Import HttpClientModule from '@angular/common/http' in your app module.

Add HttpClientModule to the imports array inside @NgModule decorator.

Examples

Basic setup adding HttpClientModule to your main app module.

Angular

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

@NgModule({
  imports: [HttpClientModule]
})
export class AppModule { }

Typical app module setup with BrowserModule and HttpClientModule together.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

Sample Program

This example shows how to set up HttpClientModule and use HttpClient to fetch data from a public API. The data is shown in the app template as JSON.

Angular

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

@Component({
  selector: 'app-root',
  template: `<h1>Data from Server</h1>
             <pre>{{ data | json }}</pre>`
})
export class AppComponent {
  data: any;
  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe(response => this.data = response);
  }
}

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

Important Notes

HttpClientModule must be imported once in your app module to use HttpClient service anywhere.

HttpClient methods like get() return Observables, so you subscribe to get the data.

Always handle errors when calling servers to keep your app stable.

Summary

HttpClientModule enables your Angular app to communicate with servers.

Import it in your app module and add it to imports array.

Use HttpClient service to make HTTP requests and get data.