@ngworker/router-component-store v0.3.2

Router Component Store

@ngworker/router-component-store

An Angular Router-connecting NgRx component store.

Compatibility

Required peer dependencies:

• Angular >=15.0
• NgRx Component Store >=15.0
• RxJS >=7.4
• TypeScript >=4.8

Published with partial Ivy compilation.

API

RouterStore

A RouterStore service has the following public properties.

A RouterStore service is provided by using either provideGlobalRouterStore or provideLocalRouterStore.

The global RouterStore service is provided in a root environment injector and is never destroyed but can be injected in any class.

A local RouterStore requires a component-level provider, follows the lifecycle of that component, and can be injected in declarables as well as other component-level services.

Global router store

An application-wide router store that can be injected in any class. Use provideGlobalRouterStore to provide it in a root environment injector.

Providing in a standalone Angular application:

// main.ts
// (...)
import { provideGlobalRouterStore } from '@ngworker/router-component-store';

bootstrapApplication(AppComponent, {
  providers: [provideGlobalRouterStore()],
}).catch((error) => console.error(error));

Providing in a classic Angular application:

// app.module.ts
// (...)
import { provideGlobalRouterStore } from '@ngworker/router-component-store';

@NgModule({
  // (...)
  providers: [provideGlobalRouterStore()],
})
export class AppModule {}

Usage in service:

// hero.service.ts
// (...)
import { RouterStore } from '@ngworker/router-component-store';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  #routerStore = inject(RouterStore);

  activeHeroId$: Observable<string | undefined> =
    this.#routerStore.selectRouteParam('id');
}

Usage in component:

// hero-detail.component.ts
// (...)
import { RouterStore } from '@ngworker/router-component-store';

@Component({
  // (...)
})
export class HeroDetailComponent {
  #routerStore = inject(RouterStore);

  heroId$: Observable<string | undefined> =
    this.#routerStore.selectRouteParam('id');
}

Local router store

A component-level router store. Can be injected in any directive, component, pipe, or component-level service. Explicitly provided in a component sub-tree using Component.providers or Component.viewProviders.

Usage in component:

// hero-detail.component.ts
// (...)
import {
  provideLocalRouterStore,
  RouterStore,
} from '@ngworker/router-component-store';

@Component({
  // (...)
  providers: [provideLocalRouterStore()],
})
export class HeroDetailComponent {
  #routerStore = inject(RouterStore);

  heroId$: Observable<string | undefined> =
    this.#routerStore.selectRouteParam('id');
}

Serializable router state

Several of the Angular Router's types are recursive which means that they aren't serializable. The router stores exclusively use serializable types to support advanced state synchronization strategies.

MinimalActivatedRouteSnapshot

The MinimalActivatedRouteSnapshot interface is used for the observable RouterStore#currentRoute$ property. This interface is a serializable subset of the Angular Router's ActivatedRouteSnapshot class and has the following public properties.

MinimalRouteData

The MinimalRouteData interface is used for the RouterStore#data$ property. This interface is a serializable subset of the Angular Router's Data type. In particular, the symbol index in the Angular Router's Data type is removed. MinimalRouteData has the following signature.

export type MinimalRouteData = {
  [key: string]: any;
};