8

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.

Prashant Pokhriyal
  • 3,727
  • 4
  • 28
  • 40
user1613338
  • 153
  • 1
  • 2
  • 9
  • maintain the state of search page in a search service rather than search page. that way you can maintain state. the issue is when you route from one route to a different route the component is destroyed in angular. so it will not maintain state values within component. – Gary Dec 22 '17 at 07:14
  • Have similar need, what's the solution? Thanks – Jeb50 Feb 24 '23 at 18:26

2 Answers2

5

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.

Prashant Pokhriyal
  • 3,727
  • 4
  • 28
  • 40
Harshil Shah
  • 317
  • 2
  • 7
  • I used this approach. The service is a singleton. On search submit, I set an instance variable of the searchRequest on the service. On subscribe.next, I set an instance variable on the service that is the response. on ngOnInit on the search page, I check to see if the instance variables on the service exists (not undefined). If they do, I patch my form values from the searchRequest (the instance variable on the service) and the searchResponse from the instance value on the service. No extra round trips to the server when navigating to/fro details page. Navigate with history.back() on details. – Arizon Aug 14 '23 at 13:10
4

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');
double-beep
  • 5,031
  • 17
  • 33
  • 41
Nabel
  • 1,767
  • 14
  • 23