Nickelback Plays Music

    @ngworker/router-component-store
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    Router Component Store

    @ngworker/router-component-store

    An Angular Router-connecting NgRx component store.

    Compatibility

    Required peer dependencies:

    • Angular >=14.0
    • NgRx Component Store >=14.0
    • RxJS >=7.4
    • TypeScript >=4.6

    Published with partial Ivy compilation.

    API

    A RouterStore service has the following public properties:

    API Description
    currentRoute$: Observable Select the current route.
    fragment$: Observable<string | null> Select the current route fragment.
    queryParams$: Observable Select the current route query parameters.
    routeData$: Observable Select the current route data.
    routeParams$: Observable Select the current route parameters.
    url$: Observable Select the current URL.
    selectQueryParam(param: string): Observable<string | undefined> Select the specified query parameter.
    selectRouteParam(param: string): Observable<string | undefined> Select the specified route parameter.

    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 {
      activeHeroId$: Observable<string> = this.routerStore.selectRouteParam('id');
    
      constructor(private routerStore: RouterStore) {}
    }

    Usage in component:

    // hero-detail.component.ts
    // (...)
    import { RouterStore } from '@ngworker/router-component-store';
    
    @Component({
      // (...)
    })
    export class HeroDetailComponent {
      heroId$: Observable<string> = this.routerStore.selectRouteParam('id');
    
      constructor(private routerStore: RouterStore) {}
    }

    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 {
      heroId$: Observable<string> = this.routerStore.selectRouteParam('id');
    
      constructor(private routerStore: RouterStore) {}
    }

    Install

    npm i @ngworker/router-component-store

    DownloadsWeekly Downloads

    148

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    125 kB

    Total Files

    21

    Last publish

    Collaborators

    • nacho_vazquez
    • layzee