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.

API	Description
`currentRoute$: Observable<MinimalActivatedRouteSnapshot>`	Select the current route.
`fragment$: Observable<string \| null>`	Select the current route fragment.
`queryParams$: Observable<Params>`	Select the current route query parameters.
`routeData$: Observable<Data>`	Select the current route data.
`routeParams$: Observable<Params>`	Select the current route parameters.
`title$: Observable<string \| undefined>`	Select the resolved route title.
`url$: Observable<string>`	Select the current URL.
`selectQueryParam(param: string): Observable<string \| undefined>`	Select the specified query parameter.
`selectRouteData<TValue>(key: string): Observable<TValue \| undefined>`	Select the specified route data.
`selectRouteParam(param: string): Observable<string \| undefined>`	Select the specified route parameter.
`selectRouterEvents(...acceptedRouterEvents: RouterEvent[]): Observable<RouterEvent>`	Select router events of the specified router event types.

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.

API	Description
`children: MinimalActivatedRouteSnapshot[]`	The children of this route in the route tree.
`data: MinimalRouteData`	The static and resolved data of this route.
`firstChild: MinimalActivatedRouteSnapshot \| null`	The first child of this route in the route tree.
`fragment: string \| null`	The URL fragment shared by all routes.
`outlet: string`	The outlet name of the route.
`params: Params`	The matrix parameters scoped to this route.
`queryParams: Params`	The query parameters shared by all routes.
`routeConfig: Route \| null`	The configuration used to match this route.
`title: string \| undefined`	The resolved route title.
`url: UrlSegment[]`	The URL segments matched by this route.

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;
};

License

yharaskrik/router-component-store

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages