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, Oct 03 '19 at 12:51

score 1 · Accepted Answer · answered Oct 03 '19 at 12:58

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 03 '19 at 12:58

Ahmed El-sayed

319
2
6

While url generate it was append behind the url "query=%5Bobject%20Object%5D" – Urvish Patel Oct 03 '19 at 13:28
@UrvishPatel make sure that you are pass right object to queryParams **{queryParams: query }** not **{queryParams: {query} }** – Ahmed El-sayed Oct 03 '19 at 13:31

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

1 Answers1