How to use Angular RouteReuseStrategy to create snapshots so you can back to previous pages without reloading data

Github of this  exmaple.

 There are a lot of practical scenarios when you load a list of items then go to the detail of an item, when you hit the back button you don't want to reload the item list again.

Angular provides you a method to do exactly that. With RouteReuseStrategy when you hit the back button it takes you right back to where you were before without reloading anything. Of course, you can choose to do this or not for any page and it super easy to set up.

To do this you need to create a class implement RouteReuseStrategy from @angular/router. There are 5 methods you need to implement: shouldDetach, store, shouldAttach, retrieve, shouldReuseRoute. Let's take a closer look at these methods.

shouldDetach

shouldDetach(route: ActivatedRouteSnapshot): boolean

When you go to the next page, this method will be trigged, it decides whether the current route (a page) should be detached. In other words, Angular takes a snapshot of it and saves it in memory so when you go to the next page, you hit the back button, it will take you right back to this page with reloading data.

store

store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle):void

If a route should be detached (shouldDetach returns true) this method will be triggered. In this method you going to tells Angular what and how to store the route.

shouldAttach

shouldAttach(route: ActivatedRouteSnapshot): boolean

When you go back to the previous page by clicking the back button of the browser or using location.back() or history.back(). This method is triggered and it decides whether the page you are going back to should be attached or not, of course you can only attach the page if you have detached it (saved it) before.

retrieve

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle

This method go to where you saved the snapshot and take it out.

shouldReuseRoute

shouldReuseRoute( future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean

This method determines if a route should be reused.

Implementation

You can use console.log in the class implemented RouteReuseStrategy to log route data when navigating to see how things work.

You need to do 3 things to make RouteReuseStrategy works.

• Create a class implemented RouteReuseStrategy
• Provide this provider (class) in app.module.ts
• Mark the route you want to detach.

Create a class implemented RouteReuseStrategy

Create a class named CustomRouteReuseStrategy and paste my code:

(you can choose the class name you like or custom my default code)

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

import { ComponentRef, Injectable } from '@angular/core';

@Injectable()

export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  private handlers: { [key: string]: RootHandler } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {

    return this.isDetachable(route);

  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle) {

    const storeKey =  this.getStoreKey(route);

    if (handler) {

      // I need to keep track of the time the route is stored so I added storeTime.

      const rootHandler = {

        handle: handler,

        storeTime: +new Date()

      };

      this.handlers[storeKey] = rootHandler;

    }

  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {

    const storeKey =  this.getStoreKey(route);

    if (this.isAtachable(route, storeKey)) {

      // you can retrun true only

      // clearNewerHandlerOnAttach is optional

      // when load the snapshot (attach old route) I only want to keep routes stored before this route

      // and delete routes stored after this route.

      // for exmaple, if i go to product list and then product detail and then saler information

      // if product list, product detail and saler information are all detachable.

      // when I back from saler information to product detail I don't want to store saler information

      // and when I back from product detail to product list I don't want to store product detail route

      // because I when I go back to product list and then go to the same product detail again

      // I want to load new data. Why?

      // I think people rarely go back and fort 2 pages multiple time

      // by deleting unnecessary stored route we save memory.

      this.clearNewerHandlerOnAttach(this.handlers[storeKey].storeTime);

      return true;

    }

    return false;

  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

    const storeKey =  this.getStoreKey(route);

    return this.handlers[storeKey]?.handle;

  }

  shouldReuseRoute( future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {

    return future.routeConfig === current.routeConfig;

  }

  private getResolvedUrl(route: ActivatedRouteSnapshot): string {

    return route.pathFromRoot

        .map(v => v.url.map(segment => segment.toString()).join('/'))

        .join('/');

  }

  private getStoreKey(route: ActivatedRouteSnapshot): string {

    const baseUrl = this.getResolvedUrl(route);

    const childrenParts = [];

    let deepestChild = route;

    while (deepestChild.firstChild) {

        deepestChild = deepestChild.firstChild;

        childrenParts.push(deepestChild.url.join('/'));

    }

    return baseUrl + '////' + childrenParts.join('/');

  }

  // true if we mark this route shouldDetach:true

  // see it in route config

  private isDetachable(route: ActivatedRouteSnapshot) {

    if ( route?.routeConfig?.data?.shouldDetach) {

      return true;

    }

    return false;

  }

  private isAtachable(route: ActivatedRouteSnapshot, storeKey: string) {

    if (this.isDetachable(route) && this.handlers[storeKey]?.handle) {

      return true;

    }

    return false;

  }

  /*

  When the user goes back (attach a root)

  I want to clear newer stored roots.

  */

  private clearNewerHandlerOnAttach(storeTime: number) {

    const handlerKeys = Object.keys(this.handlers);

    handlerKeys.forEach(k => {

      if (this.handlers[k].storeTime > storeTime) {

        const componentRef: ComponentRef<any> = (this.handlers[k].handle as any).componentRef;

        if (componentRef) {

          componentRef.destroy();

        }

        delete this.handlers[k];

      }

    });

  }

}

export interface RootHandler {

  handle: DetachedRouteHandle;

  storeTime: number;

}

Provide this provider (class) in app.module.ts

This is my app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

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

import { CustomRouteReuseStrategy } from './services/custom-route-reuse-strategy';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

  providers: [

    {

      provide: RouteReuseStrategy,

      useClass: CustomRouteReuseStrategy

    }

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

Mark the route you want to detach.
When navigating away from product list I want to store the product list route so I mark it as detachable (shouldDetach: true)

import { ProductDetailComponent } from './pages/product-detail/product-detail.component';

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { ProductListComponent } from './pages/product-list/product-list.component';

const routes: Routes = [

  {

    path: "",

    component: ProductListComponent,

    data: {

      shouldDetach: true

    }

  },

  {

    path: ":id",

    component: ProductDetailComponent

  }

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class ProductRoutingModule { }

That's it, now serve your app. turn on/off RouteReuseStrategy provider to see the differences.

Thank you for reading, if you find my post helpful please subscribe to my youtube channel for more guides and give me the motivation to keep going.