Change Route Params Without Reloading in Angular 2

Change route params without reloading in Angular 2

You could use location.go(url) which will basically change your url, without change in route of application.

NOTE this could cause other effect like redirect to child route from the current route.

Related question which describes location.go will not intimate to Router to happen changes.

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

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.

Angular router: (TAB like) navigate - how to change URL without running ngOnInit again

I finally found the solution: Change route params without reloading in angular 2

it is possible just to use location.replaceState, works like a charm in my case!

Angular 2 reload route on param change

As per the first final release, this is resolved.

Just pay much attention to correctly reset the state of the component when the parameter changes

this.route.params.subscribe(params => {
    this.param = params['yourParam'];
    this.initialiseState(); // reset and set based on new parameter this time
});

Angular 6 add query params without reloading

If you navigate to the route that uses the same component that you are already in, the component won't get reloaded.

So for example if your URL is siteurl/products and you navigate to siteurl/products with the query string, ngOnInit won't get called.

You get the new query params by subscribing to queryParams changes For example:

constructor(
    private activatedRoute: ActivatedRoute,
) { }

this.activatedRoute.queryParams.subscribe(params => {
    console.log(params);
    // logic after subscribing
});

You could also manually add query string params to the url and then manually parse them using for example uri.js: https://medialize.github.io/URI.js/, if you need more further control.

Angular 2 updating URL path params with no redirect

In the component constructor subscribe the query parameter to your model.

this.route.queryParams.subscribe(params => {
  this.myValue = params['myValue'];
});

Now, register a listener function to the view model, or alternatively add a watch to your model. Then have a navigate function you can call once your model is updated:

navigate() {
    this.router.navigate([], {queryParams: { mValue: this.myValue }});
}

How to change the value of the url without refreshing the page in angular8

You can navigate to the current route with new query params, which will not reload your page, but will update query params

editMode(){
const queryParams = this.gp.toString() + this.ap.toString() + '2';    
this.router.navigate(
        [], 
        {
          relativeTo: this.route,
          queryParams: queryParams,
          queryParamsHandling: 'merge'
        });
}

Angular 2: Route parameter changes, reload the same page?

You can use subscriber route.params to listen the param's change.

import { ActivatedRoute } from '@angular/router';

export class DemoPage {
    constructor(private _route: ActivatedRoute) { }
    ngOnInit() {
            this._route.params.forEach(params => {
                    let userId = params["userId"];
                    //call your function, like getUserInfo()
            })
    }
} 

---

Related Topics