Angular RouteReuseStrategy: Preserve Full Page State Without Recalling APIs

by The JavaDS Hub July 20, 2026

Preserve Full Page State in Angular

Preserve Full Page State (Table Data, Pagination & Filters) in Angular Using RouteReuseStrategy

Learn how to preserve table data, pagination, search filters, and scroll position while navigating between pages in Angular applications using RouteReuseStrategy.

Introduction

When building an Angular admin panel, it's common to have pages that display tables with pagination, search, and filters.

A frustrating issue occurs when users navigate to a details page and then return to the list page. The table reloads, the API is called again, and the user loses their previous page state.

Doctor List

➡️

Doctor Details

➡️

Back

Example

Doctor List → Doctor Details → Back (Lose the data and API is called again)
KYC List → KYC Details → Back (Using RouteReuseStrategy, we can preserve the page state)
Patient List → Patient Details → Back

Why Does This Happen?

By default, Angular destroys the current component whenever you navigate to another route. When you come back, Angular creates a brand-new component instance, causing the page to reload completely.

❌ Table Data

The loaded table data is lost.

❌ Pagination

Pagination resets back to page 1.

❌ Search

Search and filter values are cleared.

❌ API Calls

The API is executed again unnecessarily.

The Solution: RouteReuseStrategy

Angular provides RouteReuseStrategy, which allows you to cache a component instead of destroying it. When users return to the previous page, Angular restores the cached component instead of creating a new one.

Benefits

No unnecessary API calls
Table data remains intact
Pagination is preserved
Search & Filters remain unchanged
Scroll position is preserved
Faster navigation
Better user experience

Step 1: Create a Custom RouteReuseStrategy

Create a new file named custom-reuse-strategy.ts. This class is responsible for caching the component whenever the route contains reuse: true.

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

export class CustomReuseStrategy
implements RouteReuseStrategy {

  private storedRoutes =
    new Map<string, DetachedRouteHandle>();

  shouldDetach(
    route: ActivatedRouteSnapshot
  ): boolean {

    return !!route.data['reuse'];

  }

  store(
    route: ActivatedRouteSnapshot,
    handle: DetachedRouteHandle
  ): void {

    this.storedRoutes.set(
      route.routeConfig?.path || '',
      handle
    );

  }

  shouldAttach(
    route: ActivatedRouteSnapshot
  ): boolean {

    return this.storedRoutes.has(
      route.routeConfig?.path || ''
    );

  }

  retrieve(
    route: ActivatedRouteSnapshot
  ): DetachedRouteHandle | null {

    return this.storedRoutes.get(
      route.routeConfig?.path || ''
    ) || null;

  }

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

    return future.routeConfig ===
           curr.routeConfig;

  }

}

How It Works

shouldDetach() decides whether Angular should cache the current component.
store() stores the component in memory.
shouldAttach() checks if the cached component already exists.
retrieve() restores the cached component.
shouldReuseRoute() tells Angular when to reuse the existing route.

Step 2: Register the RouteReuseStrategy

providers: [

  {
    provide: RouteReuseStrategy,
    useClass: CustomReuseStrategy
  }

]

If your application already uses an HTTP interceptor, register both providers separately.

providers: [

  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  },

  {
    provide: RouteReuseStrategy,
    useClass: CustomReuseStrategy
  }

]

Important Note

Do not combine HTTP_INTERCEPTORS and RouteReuseStrategy inside the same provider object. Each one must have its own provider configuration.

Step 3: Enable Route Reuse

Now enable route caching by adding reuse: true to the route you want Angular to preserve.

{
  path: 'd-kyc',
  component: DKycManagementComponent,
  data: {
    title: 'KYC Management',
    reuse: true
  }
},
{
  path: 'd-kyc/d-kyc-details',
  component: DrKycDetailsComponent,
  data: {
    title: 'KYC Management'
  }
}

Tip: Only add reuse: true to pages that should preserve their state such as list pages, dashboards, reports, or management screens.

How RouteReuseStrategy Works

Let's compare the navigation flow before and after implementing RouteReuseStrategy.

❌ Without RouteReuseStrategy

📋 Open KYC List

⬇️ API loads data

➡️ Navigate to KYC Details

⬅️ Back

❌ Angular destroys component

❌ API called again

❌ Pagination resets

❌ Search lost

✅ With RouteReuseStrategy

📋 Open KYC List

⬇️ API loads data

➡️ Navigate to KYC Details

⬅️ Back

Cached Component Restored

No API Call

Pagination Preserved

Search Preserved

Filters Preserved

Scroll Position Preserved

Before vs After

Feature	Without	With RouteReuseStrategy
API Calls	Every Time	Only Once
Table Data	Lost	Preserved
Pagination	Reset	Maintained
Filters	Lost	Maintained
Scroll Position	Reset	Maintained

Things to Keep in Mind

Use RouteReuseStrategy only for pages that benefit from caching.
It is ideal for Admin Panels, CRM systems, ERP applications, Hospital Management Systems, and Dashboard pages.
Avoid caching pages that always require fresh data, such as payment pages or live dashboards.
If your data changes after Add, Update, or Delete operations, clear the cached route so Angular loads fresh data next time.
Preserving too many routes may increase memory usage. Cache only important pages.

Where Can You Use It?

🏥 Hospital Management

Doctor List, Patient List, Appointment List

👨‍💼 Admin Panels

KYC Management, User Management, Roles & Permissions

🛒 E-Commerce

Orders, Products, Customers

📊 Dashboards

Reports, Analytics, Audit Logs

Conclusion

RouteReuseStrategy is one of the most effective ways to improve the user experience in Angular applications. Instead of destroying and recreating components every time users navigate between pages, Angular restores the cached component from memory. This preserves:

Table Data
Pagination
Search
Filters
Scroll Position
Form State
Component State
User Experience

If you're building an Angular Admin Panel, Hospital Management System, CRM, ERP, or any data-heavy application, implementing RouteReuseStrategy is a simple yet powerful optimization that eliminates unnecessary API calls and makes navigation feel much faster.

Made with ❤️ using Angular & RouteReuseStrategy

The JavaDS Hub