router.navigate with query params Angular 5

Question

I'm having an issue with routing to a route with query params I have a function like so

goToLink(link) {
    this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

and this function

sortParams(link) {
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = {};
    params.forEach((d) => {
      pair = d.split('=');
      data[`${pair[0]}`] = pair[1];
    });
    return data;
}

okay so basically what Is happening I have a function called goToLink() and that takes in a url and the url that gets passed is a string with query params like so..

https://website.com/page?id=37&username=jimmy

the above is just an example thats not what it actually looks like but its a link string with query parameters now so what happens is I remove the params from the string and store them in a data object in the sortParams() function so when I pass the above string in I get an object that looks like this

{id: 37, username: 'jimmy'}

now thats what i'm passing into the queryParams: section in the router.navigate,

the function should look like this when the object is returned

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

so i successfully route to the desired route but the query params look like this..

/page;queryParams=%5Bobject%20Object%5D

Am I doing something wrong here??

Any help would be appreciated!

EDIT

If I just change the function to this

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

I get the same url /page;queryParams=%5Bobject%20Object%5D

take a look at this https://alligator.io/angular/query-parameters/ — brijmcq, Oct 25 '18 at 02:26

KShewengger · Accepted Answer · 2021-05-27T23:46:41.363

Can be of that you had placed the bracket which is supposedly for the 1st param but you had encapsulated it on the whole line of route

Your code:

// This is the end of your route statement:  '}}]);' which the close bracket is included
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

Update route:

place the ] close bracket within the 1st parameter only, try to not place it on the last part of the route statement.

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});

Summary:

this.router.navigate([ url ], { queryParams: { ... } })

Bram · Answer 2 · 2019-11-08T10:12:10.300

67

If you want to navigate to a URL string including query params, try using router.navigateByUrl.

For example:

this.router.navigateByUrl('/page?id=37&username=jimmy');

edited Nov 08 '19 at 10:12

answered Nov 07 '19 at 11:42

Bram

988
7
10

4

This is by far the simplest solution. – Will Taylor Nov 12 '20 at 11:18
I also agree that this is the right and simplest solution. Especially when I get the URL from another source, so in this solution I do not have to deal with it, rather I can use it as it is. – Haim Tabak Oct 19 '21 at 16:06
this works great and you can get the params from ActivatedRoute by subscribing like `activatedRoute.params.subscribe` – Paul G Oct 10 '22 at 18:53

Adrita Sharma · Answer 3 · 2020-10-27T11:55:53.157

26

Try like this:

this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});

edited Oct 27 '20 at 11:55

answered Jun 17 '20 at 13:44

Adrita Sharma

21,581
10
69
79

score 5 · Answer 4 · edited Nov 11 '20 at 02:10

5

this.router.navigateByUrl('/page?id=37&username=jimmy');

This is better when the params are dynamic.

edited Nov 11 '20 at 02:10

Smokey Dawson

8,827
19
77
152

answered Nov 11 '20 at 02:06

Harlin Acero

77
1
2

router.navigate with query params Angular 5

4 Answers4

Linked