Maintain state of Search page after navigating back from details page in Angular

Question

I'm new to angular and I have a requirement to maintain the state of the search results page(i.e preserve the sort and filter values of the search results grid) when the user navigates to the details page by clicking on a link in search results grid and navigates back to the search page again. I tried using CustomReuseStartegy but I'm facing 2 issues:

1. Need to update the search results when the user makes some changes in the details page.
2. Once the page is detached. It is not getting attached again. (when the User navigates to some other page(different page not the details page) and comes back to the search page, the page is not getting reloaded.

It would be great if someone can give insights on how and when to reattach the components using route reuse strategy or a different solution to handle my requirement.

Answer 1

If you need to maintain state between components (pages), you should use a service.

Store the data in the service on from the Search page, and leave the page. When you return to the Search page, retrieve the data from the service.

Also, you can store data in localStorage or sessionStorage if that fits your requirement.

If you are using Angular 1.x click here.

For Angular 2+ click here.

Answer 2

I wanted to preserve the search parameters when navigating to a details page only for when the user presses the back button.

For this, I used Location to push a new item to the platform's history

this.location.go(`/items/${this.category}/${this.color}/`);

Placed this in the routing module:

{ path: 'items/:category/:color/', component: ItemsComponent}
{ path: 'items', component: ItemsComponent}

Then I used the route to see if there were parameters:

const category = this.route.snapshot.paramMap.get('category');
const locations = this.route.snapshot.paramMap.get('color');