Angular 4 HttpClient Query Parameters

I ended up finding it through the IntelliSense on the get() function. So, I'll post it here for anyone who is looking for similar information.

Anyways, the syntax is nearly identical, but slightly different. Instead of using URLSearchParams() the parameters need to be initialized as HttpParams() and the property within the get() function is now called params instead of search.

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

getLogs(logNamespace): Observable<any> {    // Setup log namespace query parameter    let params = new HttpParams().set('logNamespace', logNamespace);    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })}

I actually prefer this syntax as its a little more parameter agnostic. I also refactored the code to make it slightly more abbreviated.

getLogs(logNamespace): Observable<any> {    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {        params: new HttpParams().set('logNamespace', logNamespace)    })}

Multiple Parameters

The best way I have found thus far is to define a Params object with all of the parameters I want to define defined within. As @estus pointed out in the comment below, there are a lot of great answers in This Question as to how to assign multiple parameters.

getLogs(parameters) {    // Initialize Params Object    let params = new HttpParams();    // Begin assigning parameters    params = params.append('firstParameter', parameters.valueOne);    params = params.append('secondParameter', parameters.valueTwo);    // Make the API call using the new parameters.    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

Multiple Parameters with Conditional Logic

Another thing I often do with multiple parameters is allow the use of multiple parameters without requiring their presence in every call. Using Lodash, it's pretty simple to conditionally add/remove parameters from calls to the API. The exact functions used in Lodash or Underscores, or vanilla JS may vary depending on your application, but I have found that checking for property definition works pretty well. The function below will only pass parameters that have corresponding properties within the parameters variable passed into the function.

getLogs(parameters) {    // Initialize Params Object    let params = new HttpParams();    // Begin assigning parameters    if (!_.isUndefined(parameters)) {        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);    }    // Make the API call using the new parameters.    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

You can (in version 5+) use the fromObject and fromString constructor parameters when creating HttpParamaters to make things a bit easier

    const params = new HttpParams({      fromObject: {        param1: 'value1',        param2: 'value2',      }    });    // http://localhost:3000/test?param1=value1&param2=value2

or:

    const params = new HttpParams({      fromString: `param1=${var1}&param2=${var2}`    });    //http://localhost:3000/test?paramvalue1=1&param2=value2

You can pass it like this

let param: any = {'userId': 2};this.http.get(`${ApiUrl}`, {params: param})