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 · Accepted Answer · 2018-08-31 09:20:50Z

5

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.

answered Aug 31, 2018 at 9:20

Gregor Ojstersek

1,3798 silver badges14 bronze badges

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

1 Comment

Marcus Over a year ago

Hi Gregor, thank you for taking your time to help me. The problem is that I would like to add the query parameters from my pipe insted of the component, and I think this is the reason the page is reloaded. But I might be wrong

agascon · Accepted Answer · 2018-08-31 09:15:15Z

0

Have a look on this.

I think answer from Simon McClive is what you need (Refer to onSameUrlNavigation option).

answered Aug 31, 2018 at 9:15

agascon

7842 gold badges9 silver badges28 bronze badges

1 Comment

Marcus Over a year ago

Hi @agascon, thank you for your answer, I already use the onSameUrlNavigation in my router so that's not the solution

Collectives™ on Stack Overflow

Angular 6 add query params without reloading

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related