What is the effect of preserving Angular Router query parameters?

Question

Per this article with Angular it's possible to preserve query parameters like this:

goUsers() {
  this.router.navigate(['/users'], { queryParamsHandling: 'preserve' 
   });
}

I'm looking for a practical examples that shows why we might want to do this?

Answer 1

If you look into the definition for queryParamsHandling (not much is given there), it is to handle next navigation.

The practical example would be if you want to make your app stateless. So it will help you no to maintain the selections made on web page to be maintained. For example on shopping or travelling site, they store the choices selected in query parameters as even site goes down or you reload the page the choices selected still persist.

Second would be easier bookmarking so when you bookmark the page with given selections, you can easily open it next time or even forward this link to anyone without specifying the selections that you choose for the result.

For client-side application, its a good way to store state at given pageview and when you move forward or backward in browser history your selection will persist. It will be helpful for user as each time they don't have to update their choices.

Answer 2

Suppose you are at:

http://localhost:4200/heros?hero=jack

And you want to move to the crisis center but keep jack as the hero, so that you can match jack up to a crisis.

goCrises() {
  this.router.navigate(['/crises-center'], { queryParamsHandling: 'preserve' 
  });
}

This changes the URL to http://localhost:4200/crises-center?hero=jack and that component can retrieve the hero parameter via ActivateRoute and match up the hero to a crises.

Answer 3

I'm using this to preserve the lang queryparam.

According to Google's guidelines, one url must match a specific content. So storing the language in localStorage is not recommended.