angular: HttpParams of New HttpClient Doesn't Support Number, Boolean and Date

This is for those who want fast solution.

// utils.service.ts
import { HttpParams } from '@angular/common/http';
// ...
export class UtilsService {
    static buildQueryParams(source: Object): HttpParams {
        let target: HttpParams = new HttpParams();
        Object.keys(source).forEach((key: string) => {
            const value: string | number | boolean | Date = source[key];
            if ((typeof value !== 'undefined') && (value !== null)) {
                target = target.append(key, value.toString());
            }
        });
        return target;
    }
}

// heroes.service.ts
import { HttpClient } from '@angular/common/http';
// ...
getHeroes(params: HeroesQueryParams): Observable<Heroes> {
    const queryParams: HttpParams = UtilsService.buildQueryParams(filter);
    return this.httpClient.get<Heroes>('/path/to/heroes', {
        params: queryParams
    });
}

FIX THIS!

@nhays89, instead of yelling you’d better create pull request with fix.

@nhays89, instead of yelling you’d better create pull request with fix.

HttpParams is immutable. set() creates and returns a new HttpParams instance, without mutating the instance on which set() is called. So the code should be

const params = new HttpParams().set(‘status’, status);

This is not a regression, since HttpClient is explicitly not API-compatible with the old @angular/http library. However, it is something we should support.

@gautamkrishnar, I think there won’t be any. It seems like Angular team sees us using new HttpParams().append(key, nonStringValue.toString()) each time, so I just proceed with my solution above.

HttpParams is immutable. set() creates and returns a new HttpParams instance, without mutating the instance on which set() is called. So the code should be

const params = new HttpParams().set(‘status’, status);

@gautamkrishnar, I think there won’t be any. It seems like Angular team sees us using new HttpParams().append(key, nonStringValue.toString()) each time, so I just proceed with my solution above.

this OOP enthusiasm is definitely went too far in this case

Still no update on this?

Finally, here’s the solution.

// utils.service.ts
import isNil from 'lodash/isNil';
import isPlainObject from 'lodash/isPlainObject';

import { HttpParams } from '@angular/common/http';
// ...
export class UtilsService {
    static buildQueryParams(source: Object): HttpParams {
        let target: HttpParams = new HttpParams();
        Object.keys(source).forEach((key: string) => {
            let value: any = source[key];
            if (isNil(value)) {
                return;
            }
            if (isPlainObject(value)) {
                value = JSON.stringify(value);
            } else {
                value = value.toString();
            }
            target = target.append(key, value);
        });
        return target;
    }
}

// heroes.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

import { UtilsService } from '/path/to/utils.service';

import { Heroes } from '/path/to/heroes.model';

@Injectable()
export class HeroesService {
    constructor(private httpClient: HttpClient) {
    }

    getHeroes(params: any): Observable<Heroes> {
        const queryParams: HttpParams = UtilsService.buildQueryParams(params);
        return this.httpClient.get<Heroes>('/path/to/api/heroes', { params: queryParams });
    }
}

Here I used two helper methods from Lodash.

@AlainD-, thanks for pointing this out. It really depends on the client-server contract. For example, maybe you want Date.now().toString() instead of new Date().toISOString(). In this solution I wanted to mimic AngularJS behavior, so I need to take a look at its date auto convertion and replicate it. What’s even more important, is to safely handle reference types: Object, Array and Function. Arrays work as expected, because [1, 2, 3].toString() returns '1,2,3', but it’s not the case for objects and functions. Probably objects auto conversion should be just JSON.stringify({ foo: 'bar' }). And for functions I think we may leave toString(). What’s your opinion? Am I overcomplicating this?

@ericmartinezr seems like #19595 wont be updated

See https://github.com/angular/angular/pull/19595