how to added dynamic query params using string in Angular 7?

Question

Currently I have multiple dropdown field in screen. when selected dropdown value pass in the query param so I want to create dynamic query param added. my code is below

     // this is one of the dropdown value
    if (this.SearchText) {
        query += 'q:' + SearchText + ',';
       }
// this is the second one of dropdown value 
    if (this.MakeId) {
        makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
        navigateUrl += '/' + makename;
        query += 'merk:' + this.MakeId + ',merkname:' + makename + ',';
       }
    this.router.navigate([ navigateUrl ], { queryParams: { query } });

So if "MakeId" is not dropdown value then should not added in "queryParams" so how can I do it. Above solution is not working it.

Apply solution for Dynamically create query Params in Angular 2 but it is not fit in my requirement. So can you help me anyone in it?

You have to pass object of keys and properties in queryParams not a string — Babar Hussain
– Babar Hussain, Commented Oct 3, 2019 at 12:51

Ahmed El-sayed · Accepted Answer · 2019-10-03 12:58:14Z

1

QueryParams should take an Object not a string ,

so you can do it by this way

let query = {};
// this is one of the dropdown value
if (this.SearchText) {
    query['q'] =  SearchText;
   }
// this is the second one of dropdown value 
if (this.MakeId) {
    makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
    navigateUrl += '/' + makename;
    query['merk'] =  this.MakeId;
    query['makename'] =  makename;
   }
this.router.navigate([ navigateUrl ], { queryParams:  query  });

answered Oct 3, 2019 at 12:58

Ahmed El-sayed

3542 silver badges7 bronze badges

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

2 Comments

Urvish Patel Over a year ago

While url generate it was append behind the url "query=%5Bobject%20Object%5D"

Ahmed El-sayed Over a year ago

@UrvishPatel make sure that you are pass right object to queryParams {queryParams: query } not {queryParams: {query} }

Collectives™ on Stack Overflow

how to added dynamic query params using string in Angular 7?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related