Angular HttpClient , Param with name 'query' failed to set

Question

I have got a params variable in Angular service which is of type HttpParams.

When I do

params.set('sortby', sortby.toString());

or

params.set('top', top.toString());

both of this are working and getting added to params variable and passing on to the API.

However the issue is when I have a route param defined as 'query' in the API. I failed to understand why my code,

params.set('query', query.toString());

not working at all. It just don't get added to the params list. I assume it is something to do with the name 'query'. Updating API is not a choice at this moment.

Is there a way I could make 'query' work?

API Call :

Try updating directly to the request from chrome console. Even then I could not find the query param.

EDIT : newParams()

That is returning the HttpParams with a correct codec

protected newParams(): HttpParams {
    return new HttpParams({
      encoder: PARAMETER_CODEC
    });
  }

And Encoder is ,

class ParameterCodec implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}
const PARAMETER_CODEC = new ParameterCodec();

Can you please add your generated service link? And also add if there is error/warning messages or screenshots... — rcanpahali
– rcanpahali, Commented Feb 25, 2019 at 14:24
and also are you trying params = params.set('query', "alo"); not just params.set('query', "alo"); ? — Lia
– Lia, Commented Feb 25, 2019 at 14:29
doing let params = new HttpParams().set('query', 'myname') works fine for me — nircraft
– nircraft, Commented Feb 25, 2019 at 14:30
are you sure params.query actually exists? Try setting the query param with some random string, and see if that works — Poul Kruijt
– Poul Kruijt, Commented Feb 25, 2019 at 14:33

nircraft · Accepted Answer · 2019-02-25 15:45:43Z

2

If you are wondering why no parameters get passed, there is a key hint in the referenced HttpParams docs

This class is immutable - all mutation operations return a new instance.

Basically you should be able to send params/query by chaining like this to have multiple params:

    const params = new HttpParams()
        .set('query', 'value here')
        .set('another_param', 'value_here')
        .set('sortby', sortby.toString());

return this.httpClient.get('my url', { params })

If you want to append HttpParams conditionally, use a variation of this instead, Ex:

let params = new HttpParams();
if ( limit ) {
  params = params.set('limit', String(limit));
}
params = params.set('search', keyword);

edited Feb 25, 2019 at 15:45

nircraft

8,5085 gold badges33 silver badges46 bronze badges

answered Feb 25, 2019 at 14:54

ACEG

2,0517 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ACEG Over a year ago

@nircraft He can try chaining the set for the query param, the result can tell us more.

TBA Over a year ago

Thanks Any Ways but this won't let me solve my issue because I gotta check for null

nircraft Over a year ago

@TBA, please try to explain more about the issue in original question, also make sure to share some code snippet from what ever you have tried. params = new Params() doesn't work. had it been your code snippet not some screenshot you would have got the answer quicker.

Collectives™ on Stack Overflow

Angular HttpClient , Param with name 'query' failed to set

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related