Why HttpParams doesn't work in multiple line in angular 4.3

Question

From Angular 4.3 they introduced HttpClient instead of Http. in HttpClient I can't use URLSearchParams for url query parameter . instead of URLSearchParams I'm using HttpParams

This work

 var params = new HttpParams().append('a', '1').append('b', '2');

But why this doesn't work

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

Max Koretskyi · Accepted Answer · 2018-01-16T10:23:16.623

122

The new HTTP client works with immutable request object and all its consistuent parts like HttpParams and HttpHeaders. To understand why see Why is http request and all its constituent parts like HttpHeaders and HttpParams are immutable or read the article Insider’s guide into interceptors and HttpClient mechanics in Angular.

That is why append method merges the parameters and returns the new instance of the merged HttpParams object on each call to append:

  /**
   * Construct a new body with an appended value for the given parameter name.
   */
  append(param: string, value: string): HttpParams { 
        return this.clone({param, value, op: 'a'}); 
  }

  private clone(update: Update): HttpParams {
    const clone = new HttpParams({encoder: this.encoder}); <-------
    clone.cloneFrom = this.cloneFrom || this;
    clone.updates = (this.updates || []).concat([update]);
    return clone;                                          <--------
  }

So here:

var params = new HttpParams().append('a', '1').append('b', '2');

the append with b parameter updates the object returned by the append with a parameter.

While with this approach

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

the append always updates initial state of the HttpParams and all intermediary append operations effectively ignored.

So you have to use the previous returned value:

var params = new HttpParams();
params = params.append('a', '1');
params = params.append('b', '2');

Or use the shortcut with fromObject:

let searchParams = new HttpParams({
    fromObject: {
        query: query,
        sort: sort,
        order: order
    }
});

const modified = req.clone({params: searchParams});

Or use setParams method on a request directly:

const modified = req.clone({setParams: {'query': query, 'sort': sort, 'order': order}});

Also, since 5.1.x you can pass object directly instead of an instance of HttpParams:

const params = {
  'a': '1',
  'b': '2'
};

this.http.get('...', { params })

edited Jan 16 '18 at 10:23

answered Aug 02 '17 at 11:31

Max Koretskyi

101,079
60
333
488

Thanks. If i don't how can I modify my `params`. Suppose If I have `c` then how can I modify `params` object If I have to rebuild my `params` I think its not good way . – Imran Aug 02 '17 at 11:45
1

sorry, can't understand. can you rephrase it? – Max Koretskyi Aug 02 '17 at 13:32
@imran I think you can use params.set("key", 1).set("key", 2); this way the key will left with 2. – zt1983811 Sep 14 '17 at 18:49
This seams to also be the case for params = params.set('a', '1'); as I have just discovered (angular 5); – SoEzPz Nov 03 '17 at 00:32
1

@SoEzPz, yes, in the new HttpClient module most entities are immutable – Max Koretskyi Nov 03 '17 at 05:57
@AngularInDepth.com This is really odd, HttpParams is immutable, but HttpHeaders is not? Why is the API not consistent? – Kugel Nov 26 '17 at 23:58
@Kugel, what makes you think HttpHeaders are not immutable? [They are](https://github.com/angular/angular/blob/b1f8eb14c8cd1f415b07d72e09d14bed77c8d4ac/packages/common/http/src/headers.ts#L123) – Max Koretskyi Nov 27 '17 at 14:33
:/ fromobject and setParams, they are not documented are they? – Ayyash Jan 04 '18 at 08:35
@Ayyash, I don't know, I use sources as documentation :) I believe they are only available starting from Angular 5 – Max Koretskyi Jan 04 '18 at 08:49
@AngularInDepth.com oh boy I wish I had access to these sources :) – Ayyash Jan 04 '18 at 09:31
oh that source, pretty clever – Ayyash Jan 04 '18 at 16:12

score 44 · Answer 2 · answered Aug 09 '17 at 05:42

44

For this to work

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

This has to be changed to

var params = new HttpParams();
params = params.append('a', '1');
params = params.append('b', '2');

It can be looped and added dynamically

answered Aug 09 '17 at 05:42

Anthony

602
4
18

4

This is the only solution which worked for me with Angular 5 . Thanks you very much – Pratap A.K Nov 29 '17 at 07:40
As it's said by Pratap A.K this is only working solution for me. I had to add the duplicate params such as {category:1,category:3} – Samiullah Khan Mar 31 '18 at 06:31
3

This is so counter intuitive .. but it works .. thank you – Ricardo Saracino Jan 14 '19 at 16:21

yurzui · Answer 3 · 2017-09-20T20:00:54.867

13

Since 5.0.0-beta.6 (2017-09-03) new feature(accept object map for HttpClient headers & params) is available.

Now we can pass object directly instead of HttpParams:

const params = {
  'a': '1',
  'b': '2'
};

this.http.get('...', { params })

or instead of HttpHeaders:

http.get('/url', {
   headers: {'My-Header': 'header value'}
})

edited Sep 20 '17 at 20:00

answered Sep 20 '17 at 09:12

yurzui

205,937
32
433
399

score 2 · Answer 4 · answered Aug 15 '17 at 12:49

Actually @Maximus made a pretty good explanation about the immutability of the HttpParams object, and all you need is to simply replace the params with its clone inside the loop.

Assuming that you have zero-to-many params available, stored in an array similar to the structure below:

"params": [
  {
    "key": "p1",
    "value": "v1"
  },
  {
    "key": "p2",
    "value": "v2"
  }
]

And according to the information above, the following helper function should help:

export const getHttpParams = (params: Array<any>): HttpParams => {
  let res = new HttpParams();

  for (const item of params)
    res = res.append(item.key, item.value);

  return res;
};

Usage

const backend = 'http://httpstat.us/200';
const params = getHttpParams(backend.params);

return this.http.get(`${backend}`, { params });

Hope it helps!

score 2 · Answer 5 · answered Oct 03 '17 at 15:01

I have tried all the other ways on this post, but had little success. So I'm chaining params onto an HttpParams singleton and calling toString() to return a string type. I can then pass that to http.get() and everything seems to be working fine for building up the url parameters. Here is my ng -v:

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
           |___/
@angular/cli: 1.4.2
node: 8.5.0
os: linux x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Here is an example that is working well for me:

// Simplified for example (I'm using Redux and won't go into all that)
private downloadState = { requestType: 'Auction', fileType: 'CSV' };

getStuffFromApi(): Observable<any> {
    const { requestType, fileType } = this.downloadState;
    const apiRoot = 'http://www.example.com';

    const params: string = new HttpParams()
        .set('RequestType', requestType)
        .set('FileType', fileType)
        .set('AuctionType', auctionType)
        .set('BackorderDay', backorderDay)
        .toString();

    return this.http.get(apiRoot, { params })
        .map(res => res.json())
        .catch(err => Observable.of(err.json()));

}

Why HttpParams doesn't work in multiple line in angular 4.3

5 Answers5

Linked