Angular 4 HttpClient Query Parameters

Question

I have been looking for a way to pass query parameters into an API call with the new HttpClientModule s HttpClient and have yet to find a solution  With the old Http 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 a search property  so I am wondering where to pass in the query parameters

User · Answer

If you have an object that can be converted to {key: 'stringValue'} pairs, you can use this shortcut to convert it:

this._Http.get(myUrlString, {params: {...myParamsObject}});

I just love the spread syntax!

User · Answer

A more concise solution   this  Http get    API URL  api v1 data logs          params          logNamespace  logNamespace

User · Answer

search property of type URLSearchParams in RequestOptions class is deprecated in angular 4  Instead  you should use params property of type URLSearchParams

User · Answer

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 amp param2 value2   or       const params   new HttpParams         fromString   param1   var1  amp param2   var2                  http   localhost 3000 test paramvalue1 1 amp param2 value2

User · Answer

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 lt any gt            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 lt any gt         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

User · Answer

joshrathke is right   In angular io docs is written that URLSearchParams from  angular http is deprecated  Instead you should use HttpParams from  angular common http  The code is quite similiar and identical to what joshrathke have written  For multiple parameters that are saved for instance in a object like      firstParam  value1    secondParam  value2     you could also do  for let property in objectStoresParams      if objectStoresParams hasOwnProperty property        params   params append property  objectStoresParams property            If you need inherited properties then remove the hasOwnProperty accordingly

User · Answer

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   gt            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

User · Answer

You can pass it like this  let param  any     userId   2   this http get    ApiUrl     params  param

[angular] Angular 4 HttpClient Query Parameters

Examples related to angular

Examples related to typescript

Examples related to http

Examples related to lodash

Examples related to angular-httpclient