Angular, Http GET with parameter?

by

Having something like this:

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('projectid', this.id);
let params = new URLSearchParams();
params.append("someParamKey", this.someParamValue)

this.http.get('http://localhost:63203/api/CallCenter/GetSupport', { headers: headers, search: params })

Of course, appending every param you need to params. It gives you a lot more flexibility than just using a URL string to pass params to the request.

EDIT(28.09.2017): As Al-Mothafar stated in a comment, search is deprecated as of Angular 4, so you should use params

EDIT(02.11.2017): If you are using the new HttpClient there are now HttpParams, which look and are used like this:

let params = new HttpParams().set("paramName",paramValue).set("paramName2", paramValue2); //Create new HttpParams

And then add the params to the request in, basically, the same way:

this.http.get(url, {headers: headers, params: params}); 
//No need to use .map(res => res.json()) anymore

More in the docs for HttpParams and HttpClient

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. How to get query parameters from URL in Angular 5?
  4. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  5. Ionic 2 Form goes up when keyboard shows
  6. When to use square brackets [ ] in directives @Inputs and when not?
  7. Angular2 – Interaction between components using a service
  8. Reactive forms – disabled attribute
  9. How to implement sleep function in TypeScript?
  10. Testing error case with observables in services
  11. Build Angular2 HTML and TypeScript to a single file
  12. angular keyvalue pipe sort properties / iterate in order
  13. Angular subscribe elegant
  14. How to allow access outside localhost
  15. Angular – Make multiple HTTP calls sequentially
  16. @types/googlemaps/index.d.ts’ is not a module
  17. Pass parameter into route guard
  18. Angular 4+ using Google Analytics
  19. Typescript dependency injection public vs private
  20. Merging http observables using forkjoin
  21. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  22. How to use Bootstrap in an Angular project?
  23. Angular reactive Form error: Must supply a value for form control with name:
  24. How to mock Angular 4.3 httpClient an error response in testing
  25. Angular 2 creating reactive forms with nested components
  26. Limit input field to two decimal places – Angular 5
  27. Angular 6 – how to mock router.events url response in unit test
  28. How to create and download text/Json File with dynamic content using angular 2+
  29. Angular4 Load external html page in a div
  30. How to pass results between chained observables

Leave a Comment