Angular HTTP Client: Using the HttpClient Module

In the previous section, we discussed form handling and form controls, gaining a deeper understanding of how to manage user input in Angular applications. Now, we’ll shift our focus to the HTTP module—learning how to interact with backend services to send and receive data. By leveraging the HTTP module, we can easily implement network requests and build dynamic single-page applications.

1. Importing the HTTP Module

To use the HTTP client in Angular, you must first import HttpClientModule into your project—typically in the main application module file, app.module.ts:

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

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

2. Creating an HTTP Service

Next, we’ll create a service to encapsulate all HTTP requests. This promotes reusability and keeps components clean by abstracting data-fetching logic. You can generate the service using the Angular CLI:

ng generate service data

The generated data.service.ts might look like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model'; // Assume a User model exists

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users'; // Example API

  constructor(private http: HttpClient) {}

  // Fetch user data
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

Here, we inject HttpClient to make requests and use Observable to handle asynchronous data streams.

3. Using the HTTP Service

Once the service is created, it can be injected and used inside components. Below is an example implementation in app.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { User } from './user.model';

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

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }
}

In this component, we call getUsers() within the ngOnInit lifecycle hook to fetch the user list and render it in the template. The *ngFor directive iterates over the users array to display each user’s name.

4. Error Handling

In real-world applications, robust error handling for HTTP requests is essential. We can enhance our service to catch and handle errors gracefully:

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

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.apiUrl).pipe(
    catchError((error) => {
      console.error('Error occurred:', error);
      return throwError('Could not fetch users, please try again later.');
    })
  );
}

In this updated getUsers() method, we use the catchError operator to intercept request failures, log the error to the console, and propagate a meaningful error message downstream.

Summary

In this section, we learned how to use HttpClientModule to perform HTTP requests in Angular applications. We built a dedicated service to manage data retrieval, integrated it into a component, and implemented basic error handling to improve application resilience.

In upcoming sections, we’ll dive deeper into using the HTTP client to send GET and POST requests—enabling more flexible and powerful interactions with backend APIs.