Angular 6 add query params without reloading

Question

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 :)

Gregor Ojstersek Gregor Ojstersek · Accepted Answer · 2018-08-31T09:20:50

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 6 add query params without reloading

2 Answers