@ngworker/router-component-store
An Angular Router-connecting NgRx component store.
Required peer dependencies:
- Angular >=15.0
- NgRx Component Store >=15.0
- RxJS >=7.4
- TypeScript >=4.8
Published with partial Ivy compilation.
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.
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');
}
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');
}
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.
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. |
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;
};