How to Use HTTP Params in Angular: Simple Guide

In Angular, you use HttpParams to add query parameters to HTTP requests. Create an instance of HttpParams, set your parameters, and pass it to the params option in HttpClient methods like get().

Syntax

Use HttpParams to build query parameters. You create a new HttpParams object and add parameters using set() or append(). Then pass it to the params option in your HTTP request.

• new HttpParams(): starts empty parameters
• set(key, value): adds or updates a parameter
• append(key, value): adds another value for the same key
• http.get(url, { params }): sends the request with parameters

typescript

const params = new HttpParams().set('search', 'angular').set('page', '1');
this.http.get('https://api.example.com/items', { params });

Example

This example shows how to send a GET request with two query parameters: search and page. The parameters are added using HttpParams and passed to HttpClient.get(). The server will receive a URL like https://api.example.com/items?search=angular&page=1.

typescript

import { HttpClient, HttpParams } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<button (click)="fetchItems()">Fetch Items</button>`
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  fetchItems() {
    const params = new HttpParams()
      .set('search', 'angular')
      .set('page', '1');

    this.http.get('https://api.example.com/items', { params })
      .subscribe(response => {
        console.log('Response:', response);
      });
  }
}

Output

Response: { /* server JSON response for items matching search=angular and page=1 */ }

Common Pitfalls

Common mistakes include:

• Not creating a new HttpParams instance because it is immutable.
• Using set() multiple times with the same key expecting multiple values; set() replaces the value, use append() to add multiple values.
• Passing parameters as a plain object instead of HttpParams.

typescript

/* Wrong: params is a plain object, won't work as expected */
const params = { search: 'angular', page: '1' };
this.http.get('https://api.example.com/items', { params });

/* Right: use HttpParams instance */
const params = new HttpParams().set('search', 'angular').set('page', '1');
this.http.get('https://api.example.com/items', { params });

Quick Reference

Summary tips for using HTTP params in Angular:

• Always create a new HttpParams instance because it is immutable.
• Use set() to add or replace a parameter.
• Use append() to add multiple values for the same key.
• Pass the HttpParams object in the params option of HTTP methods.
• Check your URL in browser DevTools Network tab to verify parameters are sent correctly.

Key Takeaways

Use HttpParams to add query parameters in Angular HTTP requests.

HttpParams is immutable; always assign the result of set or append to a variable.

Pass HttpParams via the params option in HttpClient methods like get().

Use append() to add multiple values for the same key, set() to replace values.

Verify your request URL in browser DevTools to ensure parameters are included.