How to pass url arguments (query string) to a HTTP request on Angular?
The HttpClient methods allow you to set the params in it's options.
You can configure it by importing the HttpClientModule from the @angular/common/http package.
import {HttpClientModule} from '@angular/common/http';@NgModule({ imports: [ BrowserModule, HttpClientModule ], declarations: [ App ], bootstrap: [ App ]})export class AppModule {}
After that you can inject the HttpClient and use it to do the request.
import {HttpClient} from '@angular/common/http'@Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> </div> `,})export class App { name:string; constructor(private httpClient: HttpClient) { this.httpClient.get('/url', { params: { appid: 'id1234', cnt: '5' }, observe: 'response' }) .toPromise() .then(response => { console.log(response); }) .catch(console.log); }}
For angular versions prior to version 4 you can do the same using the Http service.
The Http.get method takes an object that implements RequestOptionsArgs as a second parameter.
The search field of that object can be used to set a string or a URLSearchParams object.
An example:
// Parameters obj- let params: URLSearchParams = new URLSearchParams(); params.set('appid', StaticSettings.API_KEY); params.set('cnt', days.toString()); //Http request- return this.http.get(StaticSettings.BASE_URL, { search: params }).subscribe( (response) => this.onGetForecastResult(response.json()), (error) => this.onGetForecastError(error.json()), () => this.onGetForecastComplete() );
The documentation for the Http class has more details. It can be found here and an working example here.
Edit Angular >= 4.3.x
HttpClient has been introduced along with HttpParams. Below an example of use :
import { HttpParams, HttpClient } from '@angular/common/http';constructor(private http: HttpClient) { }let params = new HttpParams();params = params.append('var1', val1);params = params.append('var2', val2);this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);
(Old answers)
Edit Angular >= 4.x
requestOptions.search
has been deprecated. Use requestOptions.params
instead :
let requestOptions = new RequestOptions();requestOptions.params = params;
Original answer (Angular 2)
You need to import URLSearchParams
as below
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
And then build your parameters and make the http request as the following :
let params: URLSearchParams = new URLSearchParams();params.set('var1', val1);params.set('var2', val2);let requestOptions = new RequestOptions();requestOptions.search = params;this.http.get(StaticSettings.BASE_URL, requestOptions) .toPromise() .then(response => response.json())...
Version 5+
With Angular 5 and up, you DON'T have to use HttpParams. You can directly send your json object as shown below.
let data = {limit: "2"};this.httpClient.get<any>(apiUrl, {params: data});
Please note that data values should be string, ie; { params: {limit: "2"}}
Version 4.3.x+
Use HttpParams, HttpClient from @angular/common/http
import { HttpParams, HttpClient } from '@angular/common/http';...constructor(private httpClient: HttpClient) { ... }...let params = new HttpParams();params = params.append("page", 1);....this.httpClient.get<any>(apiUrl, {params: params});
Also, try stringifying your nested object using JSON.stringify()
.