How can I change Angular2 route query parameters without navigating to the route?

Question

I have an angular2 page shows a list of items. I restrict the list initially by using the route parameters so my URL is something like:

http://localhost:54675/#/listing?filter={"Country":[6, 7]}

This will show items in the country with an ID of 6 or 7.

Then the users adds a third country (let's say 8) and I make a service call which updates the list. Since the list items are bound to an observable the list then updates on the screen.

This is exactly the behavior I want. But if the user bookmarks this page they only get the original route parameters and not the filtered results.

To fix this, I use:

this._router.navigate(['listing', { filter: newfilter }]);

This reloads the page with this route:

http://localhost:54675/#/listing?filter={"Country":[6,7,8]}

This keeps everything in sync and bookmarks work. However, there is a full page refresh. Other items load again - not just the filtered results. I also like the visual results better when it's just a single service call.

I need a way to change the route parameters without reloading the page.

Did you ever get this working?

Josh
– Josh

2017-01-05 02:29:10 +00:00
Commented Jan 5, 2017 at 2:29 — Josh
– Josh, Commented Jan 5, 2017 at 2:29

Daniel Oliveira · Accepted Answer · 2017-09-05 19:52:31Z

23

You can use the Router only to create the URL and then use the Location to change the URL without navigating.

Something like this:

import { Location } from '@angular/common';
import { Router } from '@angular/router';

// Generate the URL:
let url = this.router.createUrlTree(['listing', { filter: newfilter }]).toString();

// Change the URL without navigate:
this.location.go(url);

answered Sep 5, 2017 at 19:52

Daniel Oliveira

1,1419 silver badges27 bronze badges

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

1 Comment

Itay Over a year ago

A very elegant and clean solution! I wanted to add an ID to my route and it worked :) I used the this.location.replaceState so that when clicking to return to the previous page it would work as expected instead of going back to the same route without the ID.

Cédric Schweizer · Accepted Answer · 2019-09-26 06:43:54Z

4

For anyone who still didn't find a proper solution, try this:

this._router.navigate([], { 
 relativeTo: this.activatedRoute,
 queryParams: {
   filter: newfilter
 },
 queryParamsHandling: 'merge'
});

When navigating to the same route, the site doesn't reload!

answered Sep 26, 2019 at 6:43

Cédric Schweizer

894 bronze badges

Collectives™ on Stack Overflow

How can I change Angular2 route query parameters without navigating to the route?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related