Angular 6 add query params without reloading

angular

I'm using a custom pipe to filter a list of properties, and would like to add the selected filters to the url so that my customers can share the filtered list

If I use this, then the page will be reloaded:

this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: { county: countyId }, queryParamsHandling: 'merge' });

I have tried to add this, but with the same result (but without writing to browser history):

skipLocationChange: true

The desired function is that when the pipe is used, I update the query parameters, and nothing ells, is this even possible?

The reason I don't want the page to reload, is that I have other stuff that I don't have to reload 🙂

Best Answer

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.

Related Topic