Http params in Angular 4.3

Question

I'm trying to use the new http client that came out with Angular 4.3. I've checked the docs and the use the HttpParams class but it seems not to be working or I'm doing something wrong. Here is what I have:

delete(personId: string) {
    const params = new HttpParams();
    params.set('personId', personId);
    return this.http.delete(`${this.baseUrl}`, {
      params
    });
  }

But when making the request there are no query params in my url Any help would be appreciated

Answer 1

The params are now immutable so you have to set them when you initiate the new HttpParams so every set() returns a new instance and applies the changes. Try

const params = new HttpParams()
    .set('personId', personId);

Here are the docs that cover headers and url parameters for 4.3 - https://angular.io/guide/http#headers

---

Edit: I wanted to update my answer and state that you don't have to necessarily set the parameters when you initiate the HttpParams class. For example if you need to set parameters within a for loop or outside of the HttpParams initialization you can do so by

const params = new HttpParams()
    .set('personId', personId);

params = params.set('personName', personName);

As stated by the docs:

The HttpHeaders class is immutable, so every set() returns a new instance and applies the changes.

Answer 2

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('personId', personId);

Here is one further thing I struggled with when using this new HttpParams, sometimes we have n number of params to pass, at that time it is useful to have some function that converts parameter object(that we were using before Angular 4.3) to the HttpParams.

I suggest making toHttpParams function in your commonly used service. So you can call the function to convert the object to the HttpParams.

/**
 * Convert Object to HttpParams
 * @param {Object} obj
 * @returns {HttpParams}
 */
toHttpParams(obj: Object): HttpParams {
    return Object.getOwnPropertyNames(obj)
        .reduce((p, key) => p.set(key, obj[key]), new HttpParams());
}

Update:

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

Going forward the object can be passed directly instead of HttpParams.

This is the other reason if you have used one common function like toHttpParams mentioned above, you can easily remove it or do changes if required.