How to create HttpParams using object for HTTP request on Angular 4.3 using HttpClient

15.4k Views Asked by At

I have exactly angular version 4.3.2 and I cannot update because of dependencies. So for now I stick to this version. I have object with dynamic params (there can be other keys and values inside):

let query = {
    param1: 1,
    param2: 'a'
}

and I want to do something like:

params = new HttpParams();
params = params.append(query);
return this.httpClient.get(this.config.apiUrl + '/items', {
            params: params,
            headers: headers
        });

but there is not such params.append(query) method. So I need to iterate over the query keys and to add them one by one to the params. Is there easier solution for this?

Edit1:

according this answer this can be done since angular 5.0.0-beta.6 (2017-09-03), but is not solution for me. https://stackoverflow.com/a/46317900/1995258

4

There are 4 best solutions below

1
On BEST ANSWER

I solved it that way:

const params: HttpParams = new HttpParams().set('filters', JSON.stringify(filters));
0
On
    let query = {
    param1: 1,
    param2: 'a'
}
    params = new HttpParams();
    params = params.appendAll(query);
    return this.httpClient.get(this.config.apiUrl + '/items', {
                params: params,
                headers: headers
            });

You can also achive this way

0
On

it will be work

let params = new HttpParams();
params = params.append('param1', '1' )
params = params.append('param2', 'a' )

Get URL be like

this.HttpClient.get(this.config.apiUrl + '/items', { params:params}).subscribe(
(response)=>{
   console.log(response)
})
1
On

It can be done by using fromObject property

const params = {
    email:'[email protected]',
    password:'qwerty'
}

const body = new HttpParams({fromObject: params})