how to keep track of components when navigating in dynamic component loading

Question

We have 3 basic navigations which show hide Tab view tab1, tab2, tab3. Beside this, there is navigation from sidenav.

Each tab load component dynamically, and thus we navigate from one component to another.

Second, when navigation from one component to another component ends and user clicks on Done button, it should land on the tab1/tab2/tab3 whichever were initially open in DOM(ie end of navigation and landing on tab1/tab2/tab3 view), when component navigation started.

We can't load previous component whenever we navigate backwards because each component is utilized by different components and may be part of different navigational flow.

Here, routing is not involved only component loading into view.

Is there angular way to achieve this, considering given scenario?

Here, is the stackblitz link:

https://stackblitz.com/edit/angular-basic-starter-dfqnp3?file=src/app/app.component.ts

Answer 1

You seem to have a problem with state management.

I suggest you use a service, declared in a module high enough in the hierarchy so it can be visible among your components, where you can preserve your data.

You can't preserve the state inside the component since it's destroyed but you can use a service to preserve your state and pass it as an input in the component so it can be initialized with the data you want.

Likewise I would do the same with the navigation logic you want to achieve. I would utilize router params in order to select/display the required tab and a service that would act as a store for my data state

Answer 2

Use the Angular router as opposed to creating / destroying components. Something like /home/tab1 /home/tab2 settings/tab1 helps the user grasp where they are in the application.

I second what Antonis said pertaining to state management. Depending on the complexity of your application, I recommend you use a library like NgRx as opposed to services to manage your data.