Angular >= 4.3, httpClient.get params empty

Question

I'm trying to migrate my Http requests to HttpClient requests. I was able to migrate my post queries but I'm facing a problem while migrating get queries. When I do so, my backend doesn't receive any parameters respectively, it tells me that the parameters are not provided and empty.

Did I do something wrong?

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

constructor(private httpClient: HttpClient) {}

findItems() {
   let params: HttpParams = new HttpParams();
   params.set('something', 'hello');

   this.httpClient.get<any[]>('http://localhost:3000/apath/', {params})
    .subscribe((results: any[]) => {
      console.log(results);
    }, (errorResponse: any) => {
       console.error(errorResponse);
    });
}

Any idea?

see this [Why HttpParams doesn't work in multiple line in angular 4.3](https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3/45459672#45459672) — Max Koretskyi, Aug 04 '17 at 07:34
thx @Maximus for pointing that out. Solve the issue with `set`. Hope in the future append will be improved to make my code a little bit more clean when I've to use many params ;) — David Dal Busco, Aug 04 '17 at 07:36

Pengyy · Accepted Answer · 2018-03-09T07:19:03.123

18

Currently HttpParams is immutable, you should set params as below:

// for set method
let params: HttpParams = new HttpParams().set('something', 'hello');
// for append method
let params: HttpParams = new HttpParams().append('something', 'hello');

HttpParams's set and append method will overwrite the original params instance with the newly updated one by set and append, and finally return the new instance.

So we can do it in multiple lines as below:

let params: HttpParams = new HttpParams();
params = params.set('something', 'hello');          
params = params.append('something2', 'hello2');

Plunker demo

Important:

Since Angular v5.0.0, you can use fromObject from HttpParamOptions to add multiple parameters at the same time.

const param = new HttpParams({fromObject: {aaa: '1', bbb: '222'}});

Also you can set object parameters to HttpClient methods directly

const obj = {aaa: '1', bbb: '222'};
this.http.get('test', { params: obj}).subscribe();

Refer demo, for the second way, please check browser's network to confirm the parameters has been added successfully.

edited Mar 09 '18 at 07:19

answered Aug 04 '17 at 07:22

Pengyy

37,383
15
83
73

Thx, I just noticed that in the same time you were writing your answer ;) I tried with append too, it didn't work. Set looks like the way to go. Hope it won't stay immutable, when I have many parameters to add to HttpParams, the code doesn't become that readable. – David Dal Busco Aug 04 '17 at 07:27
@PeterParker I agree with your opinion too. will mark the second way as unwork. thanks for the information. – Pengyy Aug 04 '17 at 07:28
@Pengyy, also see this [Why HttpParams doesn't work in multiple line in angular 4.3](https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3/45459672#45459672) – Max Koretskyi Aug 04 '17 at 07:34
@Maximus thanks! Just look into source of `common/http/params`, seems `set` and `append` are the same. This has ever confused me for some while. so we may do `params = params.append(something, 'a')`? – Pengyy Aug 04 '17 at 07:48
@Pengyy, not exactly the same. The operation type is different which is passed to the `clone` - `value, op: 'a'}`. But they both return a cloned cop – Max Koretskyi Aug 04 '17 at 08:23

score 0 · Answer 2 · edited Sep 04 '20 at 12:48

0

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);

edited Sep 04 '20 at 12:48

Vivek Jain

2,730
6
12
27

answered Sep 04 '20 at 10:58

Kheireddine Azzez

111
2
4

Angular >= 4.3, httpClient.get params empty

2 Answers2

Linked