How to allow multiple tabs of the same component while keeping its state?

My app uses a lazy loading tab system that is managed with a service.
When a user selects an option on the nav menu, two things happen :

• In the tab service, an entry is added to the array of tabs.
• A new route is activated and the appropriate component is loaded.

This works fine but I need something more complex :

• Being able to click any tab and restore its state -> If forms have been filled, buttons have been clicked etc. I want the exact same state when I route back to my component. From what I understand, I think that implementing RouteReuseStrategy is best suited for this kind of behaviour.
• Being able to open multiple instances of the same component. If my user selects the same option from the nav menu twice, I want to open two tabs. Each tab having its own state. I want to be able to restore that state when navigating to any of these tabs.

For now, the only solution that I found is to store the state of each component in session storage and update the components state when clicking on the tab. To achieve this, my components need to subscribe to NavigationStart and NavigationEnd events.

• NavigationStart -> Save current state in session storage.
• NavigationEnd -> Load current state from session storage.

This works fine for fairly simple components but for some very complex components containing dozens of buttons, form etc. It can quickly become a nightmare to manage since I have to write the loading and saving logic for each component. Session storage being limited in size, this is also a limit of this method.

Any suggestion would be very much appeciated.

For anyone running into the same issue, the sticky state can be achieved by implementing RouteReuseStrategy. You can find an example here.

I thought that this approach would not work with multiple instances of the same component but it actually does. You just need to tweak the implementation a little bit :

• Declare this.router.routeReuseStrategy.shouldReuseRoute = () => false; in the constuctor of your component so a new component is loaded even if the route doesn't change.
• Stored routes are kept in a map. In the article above, the keys of this map are the different routes. I concatenated my tabId to the key so I can have different entries for the same route/component, depending on the tab I want to access. Example below :

CacheRouteReuseStrategy

    @Injectable()
    export class CacheRouteReuseStrategy implements RouteReuseStrategy {

    	constructor(private linkService : LinkService) {
    	}

    	shouldDetach(route: ActivatedRouteSnapshot): boolean {
    		return true;
   	 	}

    	store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    		// If previous route and active route are the same, handle is null.
    		// In that case, we don't want to update the store (we don't want to set a null object for the route and loose informations)
    		if (handle != null && this.linkService.previousLink != null){
      			this.linkService.storedRoutes.set(route.routeConfig?.path + this.linkService.previousLink.tabId, handle);
    		}
    	}

   	 	shouldAttach(route: ActivatedRouteSnapshot): boolean {
    		if (this.linkService.activeLink != null) {
      			return !!route.routeConfig && !!this.linkService.storedRoutes.get(<string>route.routeConfig.path + this.linkService.activeLink.tabId);
    		} else {
      			return false;
    		}
    	}

    	retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    	// @ts-ignore
    		return this.linkService.storedRoutes.get(route.routeConfig.path + this.linkService.activeLink.tabId);
    	}

    	shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    		return future.routeConfig === curr.routeConfig;
   	 	}

    }

I have a service called LinkService to keep track of the route I'm leaving (previousLink) and the route I'm trying to accesss (activeLink). previousLink is the object I want to add to the store when leaving a route and activeLink is the object I want to get from the store when accessing a route.

    @Injectable({
      providedIn: 'root'
    })
    export class LinkService {
      links: LinkModel[];
      activeLink: LinkModel;
      previousLink: LinkModel;
      storedRoutes = new Map<string, DetachedRouteHandle>();
    }
    
    export interface LinkModel {
      route: string,
      parameters: string | null,
      tabId: string,
      tabTitle: string
    }

These informations are updated by another service, called TabService. What it does is pretty straightforward (create, change and remove tab logic) but I can post it later if anyone needs it.

You can use the ngOnInit and ngOnDestroy lifecycle hooks to load/store the state from/in some persistent storage. You proposed to use local-storage which is a good option, especially if you want the state also to be restored on for example a reload/refresh in the browser or when a user revisits the page at a later moment. Otherwise session-storage is also an option (read on the differences here on MDN). In case restoring on page reload is not desirable you could also simply store the state in some service (store in browser memory instead of Web storage).

Read more on these Angular lifecycle hooks here in the official Angular documentation.

UPDATE

As you mention in your comment, this won't work if you route to exactly the same component without destroying it.

You could in such case use route resolvers:

Let's assume you have a DataService instance in your application or module that you want to use to provide the data.

Configure your route for your TabComponent, something like:

{
  path: '',
  component: TabPageComponent,
  runGuardsAndResolvers: 'always', // Set flag to run always
  resolve: {
    // Provide the data service, assuming it is available in the injector
    data: DataService, 
  },
}

Now your DataService should implement the Resolve interface from '@angular/router':

import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';

export class DataService implements Resolve<any> {

  // constructor with dependencies should be implemented as needed for your case.

  public resolve(route?: ActivatedRouteSnapshot, state?: RouterStateSnapshot): Observable<any> |
    // Do your thing here using route and state.
    // i.e. API call, load from Web Storage or simply from memory in this service.
  }

}

Now the router will call resolve in your service each time your route changess. Inside your component you can subscribe to the activated route data which is an observable that emits accordingly:

import { ActivatedRoute } from '@angular/router';

//...

class TabComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  public ngOnInit(): void {
    this.route.data.subscribe((data) => {
      const data = data.data;
      // Do something with your data.
    }
  }

}

Alternative would be to create an observable and use it in your view directly:

import { ActivatedRoute } from '@angular/router';

//...

class TabComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  public data$ = Observable<any>;

  public ngOnInit(): void {
    this.data$ = this.route.data.pipe(
      map(data => data.data),
    );
  }

}

Depending on your needs you can change the runGuardsAndResolvers to run less frequently by configuring it with one of the other options. See the Angular documentation for the possible options.