Angular Zero Tutorial #18: Using HTTP Services and Dependency Injection

In the previous chapter, we explored how to inject services in Angular. In this chapter, we’ll continue learning how to use Angular’s HTTP service to make data requests—and how to manage those requests and responses using services and dependency injection.

1. Overview of Angular’s HTTP Service

Angular provides a powerful HttpClient module that simplifies making HTTP requests. Before getting started, ensure the @angular/common/http package is installed in your Angular project.

Importing HttpClientModule

Import HttpClientModule in app.module.ts and add it to the imports array:

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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Creating a Data Service

We’ll create a dedicated data service to handle all HTTP requests—making them reusable and easy to call from components. Let’s create a service named data.service.ts.

Generating the Service

Run the following command in your terminal to generate the service:

ng generate service data

Implementing the Service

In data.service.ts, we’ll use HttpClient to send a GET request and retrieve data—for example, fetching user data from a public API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

Here, we define a getUsers() method that returns an Observable, representing the asynchronous HTTP response containing user data.

3. Using the Service in a Component

Now we can inject our DataService into a component and use it to fetch user data. Next, we’ll update app.component.ts to display that data.

Updating the Component

In app.component.ts, inject DataService and call its getUsers() method:

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

@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: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getUsers().subscribe(data => {
      this.users = data; // Process the retrieved data
    });
  }
}

This component calls getUsers() during initialization, stores the fetched user data in the users array, and renders the list in the template using the *ngFor directive.

4. Error Handling

In real-world applications, handling HTTP errors is essential. We can enhance our service with error-handling logic:

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

getUsers(): Observable<any> {
  return this.http.get<any>(this.apiUrl).pipe(
    catchError(error => {
      console.error('Error occurred while fetching users', error);
      return throwError(error); // Re-throw the error for further handling
    })
  );
}

By using the catchError operator, we can execute custom logic when a request fails—such as logging the error or notifying the user—before re-emitting it downstream.

5. Summary

In this chapter, we learned how to use Angular’s HTTP service alongside dependency injection to build and consume a simple data service. We implemented functionality to fetch user data from an external API and displayed it in a component. We also added basic error handling to gracefully manage failed requests.

In the next chapter, we’ll explore form handling—covering both reactive and template-driven forms—to lay the foundation for more complex user input and data interaction scenarios.