Passing mutliple query params not working Angular 7

Question

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

export interface Filter {
  countryCode?: string,
  postalCode?: string
}

@Injectable({
  providedIn: 'root'
})
export class CountriesService{

  constructor(private http: HttpClient) { }

  getCountries(filters: Filter) {
    const params = new HttpParams();

    if (filters.countryCode) params.append('countryCode', filters.countryCode);
    if (filters.postalCode) params.append('postalCode', filters.postalCode);

    return this.http.get('/api/countries', {params: params})
  }
}

I have an Angular 7 http service that fetches cities from an end point, I want to pass optional multiple query params to filter the results on the server side but it doesnt work however it works with just one param. These params are being ignored or not passed to the request.

should be `'/api/cities` – Tebogo Mahlalela Mar 15 '19 at 10:45 — Tebogo Mahlalela, Mar 15 '19 at 10:45

Leandro Lima · Accepted Answer · 2019-03-15T10:56:04.393

2

The HttpParams is immutable as you can see here

https://angular.io/api/common/http/HttpParams#description

To add multiple params you could do

  getCountries(filters: Filter) {
    let params = new HttpParams();

    if (filters.countryCode) {
      params = params.append('countryCode', filters.countryCode);
    }
    if (filters.postalCode) {
      params = params.append('postalCode', filters.postalCode);
    }

    return this.http.get('/api/countries', {params: params})
  }

Better than this, there is the param fromObject that you may use to make the code cleaner. Check it out:

  getCountries(filters: Filter) {
    // you need the '|| undefined' if the value could be empty string
    const paramsObj = {
       countryCode: filters.countryCode || undefined,
       postalCode: filters.postalCode || undefined
    };
    const params = new HttpParams({ fromObject: paramsObj });

    return this.http.get('/api/countries', { params })
  }

edited Mar 15 '19 at 10:56

answered Mar 15 '19 at 10:48

Leandro Lima

1,164
6
12

Thanks man it works, the fromObject is incredible, I ddn't know about it. – Tebogo Mahlalela Mar 15 '19 at 11:05
It is! Depending on your filter object you could simply use `new HttpParams({ fromObject: filters })` it helps a lot – Leandro Lima Mar 15 '19 at 11:07
Why they did like this. Previous version of URLsearchparams is far better than this. They are making more complications. – Abijith Ajayan May 01 '20 at 13:50

Passing mutliple query params not working Angular 7

1 Answers1