How do not destroy component(route question)


I am building an application to hold the books of a library.
The homepage shows the list of the various elements, also giving the possibility to filter them.
Clicking on a book opens the specific page and the home page is destroyed.

I would like it to keep the previously selected filter going back and I would not like to repeat the server request to get the complete list (method entered in ngOnInit).

is there a method to do this?

Hi there, can you share some code or an example of what you are trying? It’s hard to help or understand what the issue is without a sample project

A code example will definitely help

And from the looks of using ngOnInit you seem to be using Angular? If that is the case, then I think you questions need to be rephrased as in an angular context you should want to worry about the internals on when components or created and destroyed. Or at least not try to avoid Angular doing this.

I think you are at least looking at using a service in Angular that handles the server queries, stores it in memory as variable and is able to provide the data by whatever components wants it.

Here a (Behavior)Subject is also possibly needed to ensure the state is shared consistently within the app. This at least I prefer above trying to tie everything in lifecycle hooks in the components.

The code example requested will help understanding how you store filter in the homepage. So it is easier to understand what part of the filter gets removed from memory after navigation. And why.

A third consideration is how to do the master-detail action best from a UI perspective - using a route? using a modal? or even ion-nav?

It might be advisable to browse through the Tour of Heroes example to understand the architecture of an Angular app - Angular

yes there is shareReplay from RxJs. But there are also steps needed to be done before using this method. Such as using filters$ BehaviorSubject and calling shareReplay inside of that observable.

There are countless examples you can find online if you just google.

no, I was wondering if, in general, there was a way to go from component A to component B, without destroying A

Your solution is you have to create a one component and one modal
Component will use for fetch api as you mentioned.
Modal will use for details page.
Whenever you close or back the modal your home page component filter will not be destroy.
You should try this.