How to pass data in POST request as query string parameter in angular using HttpParams

Question

I'm passing some data as query string parameter as POST method in Angular8 using HttpParams. While checking the network tab the API is not formed with the query string parameters and the request header is also not correct. Kindly find the below code base and let me know if anyone has any inputs on this.

component.ts

this.data = {
 id: 21
}
this.dataService.getData(this.data).subscribe(
response => {console.log(response);}
)

dataService.ts

getData(inputParam) {
const params = new HttpParams().set('roleId', inputParam.id);
return this.httpService.post('getDataList', {params});
}

httpService.ts

post(api: string, request: any): Observable <any> {
return this.http.post<any>(api,request);
}

while checking the network tab the api is showing like below

getDataList

we need the api with query parameter as below

getDataList?roleId=21

The above code is working fine while testing with another GET method only issue is with this POST method. Do we need to set the headers manually for the POST method? Can anyone help on this issue.

Any one know about the above issue? – knbibin Oct 11 '19 at 05:13 — knbibin, Oct 11 '19 at 05:13

score 0 · Answer 1 · answered Nov 21 '19 at 01:59

The interface for the post method on Angular's HttpService is

post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Observable<AxiosResponse<T>>;

The second input is the body of the post request, and the third is any other AxiosRequestConfigs which takes params.

Have you tried:

httpService.ts

post(api: string, request: any): Observable <any> {
    return this.http.post<any>(api, null, request);
}

How to pass data in POST request as query string parameter in angular using HttpParams

1 Answers1