CODEWITHSUNDEEP
angular
aman
aman

Reputation: 6252

Angular using HttpClient and adding mulitple params to Get

Using Angular6 here.

My API is called as:

    https://localhost:44300/list/pete/id/open

In my angular I am calling this API as:

  getData(name, id, status): Observable<any[]> {
    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    params = params.append('name', name);
    params = params.append('id', id);
    params = params.append('status', status);

    return this.httpClient.get<any[]>(this.url + '/list', {  params: params });
 }

The issue is when my UI calls this getData method, the calls that goes to the API is as below (as seen in console):

https://localhost:44300/list?name=pete&id=981&status=open

This call is not same as per my actual API call. How can I make changes and correctly pass params.

--Updated Code--

 getData(name, id, status): Observable<any[]> {
    return this.httpClient.get<any[]>(${ this.url } / list / ${ name } / ${ id } / ${ status });
  }

I get these error:

Cannot find name $
Expected 1 or 2 arguments, but got 5
The left hand side of arithmetic operation must be of type any, number, bigint, enum type
',' expected

Upvotes: 1

Views: 367

Answers (1)

Reza
Reza

Reputation: 19863

You forgot backticks (`)

getData(name, id, status): Observable<any[]> {
    return this.httpClient.get<any[]>(`${this.url}/list/${name}/${id}/${status}`);
}

see: Template literals (Template strings)

Upvotes: 1

Related Questions