How to set or remove queryParams in current route in angular 2 without reloading page

Question

I have this current route:

http://localhost:96/#/pages/settings/devices

I want to set queryParams={name:realTime} to this current route like:

http://localhost:96/#/pages/settings/devices?name=realTime

Is it possible to add or remove queryParams to the current route without reloading the page?

I got the solution for this.

This will not reload Current page

let navigationExtra: NavigationExtras = {
relativeTo: this.activatedRoute,
skipLocationChange: false,
queryParams: { name: 'realTime' }
}
    this.router.navigate(['./', navigationExtra]);

You're using `#` in your URL, indicating an SPA. That is; your page won't reload from the server. If you're bound to the URL, components may update. Otherwise, this question boils down to how to update a route via angular, of which there are plenty of examples — Rob, Jul 24 '17 at 06:06
Possible duplicate of [Change route params without reloading in angular 2](https://stackoverflow.com/questions/35618463/change-route-params-without-reloading-in-angular-2) — Rob, Jul 24 '17 at 06:07
I got the solution for this. This will not reload Current page let navigationExtra: NavigationExtras = { relativeTo: this.activatedRoute, skipLocationChange: false, queryParams: { name: 'realTime' } } this.router.navigate(['./', navigationExtra]); — Er Sushil, Jul 24 '17 at 13:35

score 2 · Accepted Answer · edited Jan 13 '20 at 13:41

add or remove queryParams to current route without realoading the page.

Just change the location hash e.g.

window.location.hash = "/pages/settings/devices?name=realTime"

More

The code I presented will work fine. However if you want it to have an impact in the state of your app, you should really check the docs on your router on how to navigate OR write your effects inline with that hash change.

score 1 · Answer 2 · answered Sep 29 '17 at 10:06

In order to update the URL without having the router executing navigation build the URL tree and set it on the current location. Don't build the URL by hand.

 const url = this
        .router
        .createUrlTree([{param1: value1, paramN: valueN}], {relativeTo: this.ar})
        .toString();

 this.location.go(url);

location was injected in the component constructor:

import { DecimalPipe, Location } from '@angular/common';
constructor(private location: Location){}

How to set or remove queryParams in current route in angular 2 without reloading page

2 Answers2

More