Angular HTTP Client: GET Request with Request Parameters (params)

The Angular HTTP Client provides a simple, efficient way to communicate with back-end services over HTTP. When working with APIs, it’s common to use GET requests with request parameters (or query parameters) to fetch specific data based on certain criteria. This article covers how to use Angular’s HTTP Client to make GET requests with request parameters, helping you interact with APIs and retrieve the precise data you need.

Prerequisites

To use Angular’s HTTP Client, you need to have:

1. Angular and HttpClientModule: An Angular application with HttpClientModule imported in your main module.
2. HttpClient: A service injected into components or services to handle HTTP requests.

Step 1: Setting Up the Angular HTTP Client

First, ensure that HttpClientModule is imported in your main application module (usually app.module.ts):

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

By importing HttpClientModule, Angular registers its HTTP services, allowing you to use HttpClient to make HTTP requests throughout your application.

Step 2: Creating a Service for HTTP Requests

Next, let’s create an Angular service to handle HTTP GET requests. Services are an ideal place to manage HTTP requests, as they allow us to organize code, reuse logic, and easily inject dependencies into components.

Generate a new service using Angular CLI:

bashCopy codeng generate service api

This command generates an api.service.ts file where we’ll implement our HTTP GET requests with request parameters.

Step 3: Making a GET Request with Request Parameters

In your ApiService file (api.service.ts), import the required modules and set up the GET request with request parameters.

Step 3.1: Import Required Modules

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

• HttpClient: Allows us to perform HTTP requests.
• HttpParams: Enables us to add query parameters to the GET request.
• Observable: Represents the result of the HTTP call, enabling us to handle asynchronous data.

Step 3.2: Define the Service and Constructor

Define the service class and inject HttpClient via the constructor:

typescriptCopy code@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com/data';
  constructor(private http: HttpClient) {}
}

Here, apiUrl is the base URL for the API endpoint.

Step 3.3: Define the GET Request with Parameters

Now, let’s create a method to make a GET request with request parameters. We’ll use HttpParams to specify the parameters.

typescriptCopy codegetData(paramsObj: { [key: string]: any }): Observable<any> {
  let params = new HttpParams();
  // Add each key-value pair to the params
  for (const key in paramsObj) {
    if (paramsObj.hasOwnProperty(key)) {
      params = params.append(key, paramsObj[key]);
    }
  }
  return this.http.get<any>(this.apiUrl, { params });
}

In this example:

• Parameters Object: paramsObj is an object containing the key-value pairs for each parameter. This allows for flexible, dynamic parameters.
• HttpParams: We initialize HttpParams and add each key-value pair from paramsObj using the append() method.
• GET Request: The get method of HttpClient takes the apiUrl and an options object where params is specified. This makes the GET request with the parameters included.

Example Usage of the GET Request with Parameters

Let’s say the API endpoint accepts parameters such as category, page, and pageSize. You can call the getData method from this service, passing an object with these parameters.

typescriptCopy codethis.apiService.getData({ category: 'books', page: '1', pageSize: '10' })
  .subscribe(response => {
    console.log(response);
  });

In this example:

• The method getData is called with parameters to filter the data by category and pagination.
• The HTTP GET request will be sent as https://api.example.com/data?category=books&page=1&pageSize=10.

Step 4: Using the Service in a Component

To make the request and display the data, inject ApiService into a component.

Step 4.1: Inject the Service

In a component, inject the ApiService in the constructor:

typescriptCopy codeimport { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="data">
      <h3>Data:</h3>
      <pre>{{ data | json }}</pre>
    </div>
  `
})
export class DataComponent implements OnInit {
  data: any;
  constructor(private apiService: ApiService) {}
  ngOnInit(): void {
    this.fetchData();
  }
  fetchData(): void {
    this.apiService.getData({ category: 'books', page: '1', pageSize: '10' })
      .subscribe(response => {
        this.data = response;
      });
  }
}

Step 4.2: Display the Data

The component template uses Angular’s JSON pipe (| json) to display the JSON response in a formatted way. When the component initializes, the fetchData method calls getData with request parameters and binds the returned data to data.

Handling Error Responses

When making HTTP requests, it’s important to handle potential errors, such as network issues or invalid responses.

Adding Error Handling with catchError

Update the getData method in ApiService to handle errors:

typescriptCopy codeimport { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
getData(paramsObj: { [key: string]: any }): Observable<any> {
  let params = new HttpParams();
  for (const key in paramsObj) {
    if (paramsObj.hasOwnProperty(key)) {
      params = params.append(key, paramsObj[key]);
    }
  }
  return this.http.get<any>(this.apiUrl, { params }).pipe(
    catchError(error => {
      console.error('Error fetching data:', error);
      return throwError(() => new Error('Error fetching data, please try again later.'));
    })
  );
}

With error handling in place:

• catchError: Catches any errors that occur during the HTTP request.
• throwError: Returns a new error observable, allowing us to inform the user or log the issue for debugging.

Example Scenario: Filtering Data with Request Parameters

Let’s apply this to a real-world scenario. Suppose you’re building an e-commerce application, and you want to fetch products based on category and price range:

typescriptCopy codefetchProducts(): void {
  this.apiService.getData({ category: 'electronics', minPrice: '100', maxPrice: '1000' })
    .subscribe(response => {
      this.products = response;
    });
}

In this scenario:

• The API endpoint URL might look like https://api.example.com/products?category=electronics&minPrice=100&maxPrice=1000.
• This approach can be expanded to include other filters like brand, rating, or availability, making your HTTP requests dynamic and versatile.

Best Practices for Using GET Requests with Parameters in Angular

1. Encapsulate Logic in Services: Keep HTTP request logic in services rather than components to improve reusability and separation of concerns.
2. Use Typed Responses: Define interfaces for API responses to provide type safety, reducing the chance of errors when handling data.
3. Handle Errors: Always handle potential errors, such as failed network requests or unexpected responses, to enhance user experience and app stability.
4. Optimize with Caching: If the data is static or infrequently updated, consider caching responses to reduce unnecessary network requests.
5. Use RxJS Operators for Advanced Handling: Leverage RxJS operators like map, filter, and switchMap for more control over data manipulation and asynchronous handling.

Conclusion

Angular’s HTTP Client provides a simple yet powerful way to make GET requests with request parameters, allowing you to fetch and filter data from APIs dynamically. By using HttpParams to add query parameters, Angular makes it easy to tailor your API calls to specific needs, such as filtering data by category or implementing pagination. With best practices like encapsulating logic in services and handling errors gracefully, you can create efficient, reliable data-fetching processes that enhance your application’s functionality and user experience.