how to prevent page refresh/reload on changing query string in angular 4+?

Question

I am adding some query string parameters to my angular route

http://localhost:4200/home/transactions?toDate=2019-02-26&fromDate=2018-01-01&startIndex=0&pageSize=20&showCashedOut=true

If i change any value in the query parameters from the URL tab it refreshes the page, Is there any way in angular to prevent this behavior? I want to be able to change the value and prevent refresh on the page. I have looked up on stack overflow and other resources

Any help would be appreciated.

Why do you need to store such values in your URL? There are several better ideas to persist or communicate informations through, components/modules/apps. — Jonathan Stellwag, Feb 26 '19 at 12:23
Probably because he wants it as an URL that can be bookmarked or send to other people — Julien Ambos, Feb 26 '19 at 12:28

score 0 · Answer 1 · answered Feb 26 '19 at 12:32

Refreshing the page when changing the url in the Browser URL Tab is inevitable. It can only be prevented with a browser dialog "Do you want to leave this page", but I guess that is not your usecase.

If you want to the change the url in your application, please look at location.replaceState(). Alternatively you can implement a route guard for more custom scenarios.

how to prevent page refresh/reload on changing query string in angular 4+?

1 Answers1