Angular 9 get data with querystring params

Question

I am trying to get data from search API. The search value is passed as a query string.

No errors at compile time, no errors at runtime.

const params = new HttpParams().set('search', 'pizza');
this.http
    .get('/hello', { responseType: 'json', params })
    .subscribe(console.log, console.log);

Generates the /hello GET query but without the query string parameters.

What's wrong?

Angular exact version is 9.1.11

EDIT

The issue does not come from Angular but on how I try to embed the app. It works when using the default dev server without trying to embed it.

Try to specify the property: `{ responseType: 'json', params: params }` — ruth, Jun 15 '20 at 20:26

Manish · Answer 1 · 2020-06-15T20:20:43.347

1

I guess you need to specify which option to assign params to.

Try this:

const apiParams = new HttpParams().set('search', 'pizza');
this.http
    .get('/hello', { responseType: 'json', params: apiParams })
    .subscribe(console.log, console.log);

edited Jun 15 '20 at 20:20

answered Jun 15 '20 at 20:15

Manish

6,106
19
64
90

1

what' different? – Rick Jun 15 '20 at 20:18
`params: apiParams` – Manish Jun 15 '20 at 20:20
oh right. syntax error. he just forgot to add ': params' – Rick Jun 15 '20 at 20:24
Yup. Please do accept the answer if it helped solve the issue. – Manish Jun 15 '20 at 20:28
1

This symtax is correct {params} as it is a ES6 shortcut for {params: params} – AirGoatOne Jun 16 '20 at 05:20
As Francois36 stated, he doesnt have to add the key explicitly, if the object refName is the same as the key would be. – sagat Jun 16 '20 at 05:26
No, the issue is not from Angular or the syntax I used. The issue came from how I embed it (maybe I should not). For now I am using the default dev server and everything work. Thanks for your help :) – AirGoatOne Jun 16 '20 at 06:47

score 0 · Accepted Answer · answered Jun 16 '20 at 06:51

There is no issue with Angular or the syntax I am using. The issue came from the integration I tried to do. I tried to embed the Angular App in a web page and develop from there.

It doesn't seem to be a good idea.

Everything work with the default dev server.

Angular 9 get data with querystring params

2 Answers2