Angular 4 HttpClient Query Parameters
Solution 1
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 })
Solution 2
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¶m2=value2
or:
const params = new HttpParams({
fromString: `param1=${var1}¶m2=${var2}`
});
//http://localhost:3000/test?paramvalue1=1¶m2=value2
Solution 3
You can pass it like this
let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})
Solution 4
A more concise solution:
this._Http.get(`${API_URL}/api/v1/data/logs`, {
params: {
logNamespace: logNamespace
}
})
Solution 5
With Angular 7, I got it working by using the following without using HttpParams.
import { HttpClient } from '@angular/common/http';
export class ApiClass {
constructor(private httpClient: HttpClient) {
// use it like this in other services / components etc.
this.getDataFromServer().
then(res => {
console.log('res: ', res);
});
}
getDataFromServer() {
const params = {
param1: value1,
param2: value2
}
const url = 'https://api.example.com/list'
// { params: params } is the same as { params }
// look for es6 object literal to read more
return this.httpClient.get(url, { params }).toPromise();
}
}
Related videos on Youtube
joshrathke
Updated on November 07, 2020Comments
-
joshrathke over 3 years
I have been looking for a way to pass query parameters into an API call with the new
HttpClientModule
'sHttpClient
and have yet to find a solution. With the oldHttp
module you would write something like this.getNamespaceLogs(logNamespace) { // Setup log namespace query parameter let params = new URLSearchParams(); params.set('logNamespace', logNamespace); this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params }) }
This would result in an API call to the following URL:
localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace
However, the new
HttpClient
get()
method doesn't have asearch
property, so I am wondering where to pass in the query parameters?-
Jun711 over 5 yearsWith Angular 7, you can write your params as an object and use it like this:
this.httpClient.get(url, { params }
Check out stackoverflow.com/a/54211610/5042169
-
-
Estus Flask almost 7 yearsThe first snippet is wrong.
let params = new HttpParams(); params.set(...)
won't work as expected. See stackoverflow.com/questions/45459532/… -
Savad KP over 6 years@joshrathke Could you please add how to add header and params together?
-
Junaid about 6 years@SavadKP you can set them like this this.http.get(url, {headers: headers, params: params}); and read about new HttpHeaders like HttpParams
-
Melroy van den Berg about 6 yearsThis is not needed anymore. You can just pass directly a JSON object to HttpClient.
const params = {'key': 'value'}
to:http.get('/get/url', { params: params })
-
Jose Enrique almost 6 years@danger89 True. But be warned: only string or string[] values allowed!
-
Pankaj Prakash over 5 yearsI guess
new HttpParams({fromObject: { param1: 'value1', ... }});
is the easiest approach (angular 5+) thenparams.set(...)
. -
Pankaj Prakash over 5 yearsSaved huge amount of my time. I was constructing url by appending query params as string to the request url.
-
DanLatimer over 4 yearsTrue but that throws typing out the window
-
InDieTasten over 4 years@DanLatimer You don't have to use any, so you can keep using typing all the way until you pass it to
params