How to handle multiple queryParams in Angular2

Question

I\'m trying to implement a filtering mechanism in a new Angular2 app, that would allow me to filter a list of entries in an array. The entries may have around 20 properties

Answer 1

Try this.

this.router.navigate(['/findlist'], { queryParams: { param1: 'value1', 'param2': 'value2' } }); 

and then the url would look like

localhost:4200/findlist?param1=value1&param2=value2 

Finally, you could get back the route params by using the snippet below,

this.route.queryParams.subscribe((p: any) => {
    if (p.param1){
        console.log(JSON.parse(p.param1));
    }
 if (p.param2){
        console.log(JSON.parse(p.param2));
    }
});

Answer 2

You could try it like this:

Define an array with your query params:

myQueryParams = [
    { id: 1, param: 'myParam' },
    { id: 2, param: 'myParam' },
    { id: 3, param: 'myParam' },
    { id: 4, param: 'myParam' },
    { id: 5, param: 'myParam' },
];

Put this array into one single query param:

this.router.navigate(['/findlist'], {
    queryParams: {
        filter: JSON.stringify(this.myQueryParams)
    }
});

Read the query param like this:

this.route.queryParams.subscribe((p: any) => {
    if (p.filter){
        console.log(JSON.parse(p.filter));
    }
});

You'll see something like this:

Now you can parse this object. I think the URL looks a little bit ugly, but it should be functional. Try it out, I hope it helps you ;)