How to Fetch Data in an Angular Custom Service

Fetching data from an API is a common task in Angular applications, and a best practice is to centralize data-fetching logic in Angular services. By using a custom service, you can organize data access in a single place, making it reusable, maintainable, and testable. In this article, we’ll walk through the process of creating a custom Angular service to fetch data, covering everything from setting up HTTP requests to handling errors.

Why Use a Service for Fetching Data?

There are several reasons to use a service for data fetching in Angular:

1. Separation of Concerns: Services keep the data access logic separate from the view (components), making the code cleaner and more modular.
2. Reusability: Services can be injected into any component, allowing multiple parts of the application to share data-fetching logic.
3. Testability: Services make it easy to mock data and test components without having to make real API calls.
4. Simplified Error Handling: Services provide a centralized place to handle errors, reducing code duplication.

Setting Up the Angular HTTP Client

To fetch data in Angular, the HttpClient service is used, which is part of Angular’s HttpClientModule. This module needs to be imported in your application’s main module.

Step 1: Import HttpClientModule

In app.module.ts, import HttpClientModule from @angular/common/http:

typescriptCopy codeimport { 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 {}

This makes the Angular HttpClient service available throughout the application.

Creating a Custom Service for Fetching Data

Next, we’ll create a custom service to handle HTTP requests. Let’s assume we’re building an application that fetches user data from an API.

Step 2: Generate a Service

Using the Angular CLI, generate a new service:

bashCopy codeng generate service user

This command creates a new service file called user.service.ts, which will contain our data-fetching logic.

Step 3: Set Up the Service with HttpClient

Open user.service.ts and set up the service to make HTTP requests. First, import HttpClient and define the API endpoint.

typescriptCopy codeimport { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';
  constructor(private http: HttpClient) {}
  // Fetching users data
  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

In this example:

• apiUrl: Specifies the base URL of the API. Here, we’re using a mock API endpoint for demonstration.
• getUsers(): Uses HttpClient to make a GET request to the API endpoint, returning an observable that emits the response data.

Step 4: Using the Custom Service in a Component

Now that we have a service set up, let’s use it in a component to fetch and display data.

Inject the Service into the Component

In a component (e.g., user.component.ts), inject the UserService and use it to fetch data when the component initializes.

1. Generate a Component (if it doesn’t exist yet):bashCopy codeng generate component user
2. Use the Service in the Component:typescriptCopy codeimport { Component, OnInit } from '@angular/core'; import { UserService } from './user.service'; @Component({ selector: 'app-user', template: ` <h2>User List</h2> <ul *ngIf="users"> <li *ngFor="let user of users">{{ user.name }}</li> </ul> ` }) export class UserComponent implements OnInit { users: any[] = []; constructor(private userService: UserService) {} ngOnInit(): void { this.userService.getUsers().subscribe((data) => { this.users = data; }); } }

In this example:

• users Property: Stores the data returned from the API.
• ngOnInit() Lifecycle Hook: Calls getUsers() from UserService when the component initializes, subscribing to the observable and storing the data in the users array.
• Template: Displays the user list by looping over users with *ngFor.

Error Handling in the Data Service

Handling errors is crucial for a good user experience. If an API call fails, we can catch the error and handle it accordingly.

Using catchError to Handle Errors

In the service, modify getUsers() to handle errors using catchError.

typescriptCopy codeimport { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';
  constructor(private http: HttpClient) {}
  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }
  private handleError(error: HttpErrorResponse) {
    console.error('Error fetching data:', error);
    return throwError(() => new Error('Error fetching data, please try again later.'));
  }
}

In this example:

• catchError: Catches any error that occurs during the HTTP request.
• handleError Method: Logs the error and returns an observable with an error message, which can be displayed to the user.

Displaying Error Messages in the Component

To display an error message when data fetching fails, add error handling in the component.

typescriptCopy codeimport { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
  selector: 'app-user',
  template: `
    <h2>User List</h2>
    <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
    <ul *ngIf="users">
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserComponent implements OnInit {
  users: any[] = [];
  errorMessage: string | null = null;
  constructor(private userService: UserService) {}
  ngOnInit(): void {
    this.userService.getUsers().subscribe({
      next: (data) => {
        this.users = data;
      },
      error: (error) => {
        this.errorMessage = error.message;
      }
    });
  }
}

Here:

• errorMessage: Stores the error message to be displayed.
• Error Handling: error callback in the subscription handles any error that occurs, setting errorMessage for display in the template.

Using Query Parameters with HttpParams

If your API supports query parameters (e.g., filtering or pagination), use Angular’s HttpParams to add parameters dynamically.

typescriptCopy codeimport { HttpClient, HttpParams } from '@angular/common/http';
getUsersByPage(page: number): Observable<any> {
  let params = new HttpParams().set('page', page.toString());
  return this.http.get<any>(this.apiUrl, { params });
}

With this, you can pass dynamic parameters when fetching data, providing more flexibility for querying APIs.

Summary of Steps to Fetch Data in a Custom Angular Service

1. Set Up the HTTP Client: Import HttpClientModule in AppModule to enable HTTP requests.
2. Create a Service: Use Angular CLI to generate a service for data fetching, and inject HttpClient to make requests.
3. Define Data-Fetching Methods: Set up GET requests in the service using HttpClient and return observables.
4. Handle Errors: Use catchError to handle any errors in the service.
5. Inject the Service into Components: Use dependency injection to access the service in components, subscribing to observables to retrieve and display data.

Conclusion

Creating a custom service in Angular for fetching data is an efficient way to organize and manage API interactions, keeping your application modular, reusable, and testable. By handling HTTP requests, managing error handling, and using Angular’s dependency injection, services simplify data management, improve maintainability, and enhance the overall structure of your Angular application.

With this guide, you can confidently set up data-fetching services in Angular, allowing you to build more complex, data-driven applications with ease.