{"id":22180045,"url":"https://github.com/ngworker/router-component-store","last_synced_at":"2025-04-09T23:15:49.727Z","repository":{"id":37067093,"uuid":"427784584","full_name":"ngworker/router-component-store","owner":"ngworker","description":"A strictly typed lightweight alternative to NgRx Router Store and ActivatedRoute.","archived":false,"fork":false,"pushed_at":"2025-02-12T20:48:12.000Z","size":2024,"stargazers_count":37,"open_issues_count":5,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T23:15:42.079Z","etag":null,"topics":["angular","component-store","ngrx","router","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngworker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["LayZeeDK"]}},"created_at":"2021-11-13T22:18:50.000Z","updated_at":"2025-03-16T03:44:12.000Z","dependencies_parsed_at":"2023-02-03T03:00:45.897Z","dependency_job_id":"769652dc-2e27-4489-91cc-2a4c691e491c","html_url":"https://github.com/ngworker/router-component-store","commit_stats":{"total_commits":401,"total_committers":2,"mean_commits":200.5,"dds":"0.47132169576059846","last_synced_commit":"6ac16c9b56da68fc8881e9034b2f575cbfd36aa9"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngworker%2Frouter-component-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngworker%2Frouter-component-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngworker%2Frouter-component-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngworker%2Frouter-component-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngworker","download_url":"https://codeload.github.com/ngworker/router-component-store/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125592,"owners_count":21051770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component-store","ngrx","router","state-management"],"created_at":"2024-12-02T09:16:38.589Z","updated_at":"2025-04-09T23:15:49.679Z","avatar_url":"https://github.com/ngworker.png","language":"TypeScript","readme":"# Router Component Store\n\n[`@ngworker/router-component-store`](https://www.npmjs.com/package/@ngworker/router-component-store)\n\n\u003cimg src=\"https://github.com/ngworker/router-component-store/blob/main/logo.png\" alt=\"Router Component Store\" height=\"384px\"\u003e\n\nA strictly typed lightweight alternative to NgRx Router Store (`@ngrx/router-store`) and `ActivatedRoute`.\n\n## Compatibility\n\nRequired peer dependencies:\n\n- Angular \u003e=15.0\n- NgRx Component Store \u003e=15.0\n- RxJS \u003e=7.5\n- TypeScript \u003e=4.8\n\nPublished with partial Ivy compilation.\n\nFind additional documentation in the [github.com/ngworker/router-component-store/docs](https://github.com/ngworker/router-component-store/tree/main/docs) directory.\n\n## Guiding principles\n\nRouter Component Store is meant as a lightweight alternative to NgRx Router Store that additionaly can be used as a replacement for `ActivatedRoute` at any route level.\n\nThe following principles guide the development of Router Component Store.\n\n- The global router store closely matches NgRx Router Store selectors\n- Local router stores closely match `ActivatedRoute` observable properties\n- Router state is immutable and serializable\n- The API is strictly and strongly typed\n\n## API\n\n### RouterStore\n\nA `RouterStore` service has the following public properties.\n\n| API                                                                                     | Description                                               |\n| --------------------------------------------------------------------------------------- | --------------------------------------------------------- |\n| `currentRoute$: Observable\u003cMinimalActivatedRouteSnapshot\u003e`                              | Select the current route.                                 |\n| `fragment$: Observable\u003cstring \\| null\u003e`                                                 | Select the current route fragment.                        |\n| `queryParams$: Observable\u003cStrictQueryParams\u003e`                                           | Select the current route query parameters.                |\n| `routeData$: Observable\u003cStrictRouteData\u003e`                                               | Select the current route data.                            |\n| `routeParams$: Observable\u003cStrictRouteParams\u003e`                                           | Select the current route parameters.                      |\n| `title$: Observable\u003cstring \\| undefined\u003e`                                               | Select the resolved route title.                          |\n| `url$: Observable\u003cstring\u003e`                                                              | Select the current URL.                                   |\n| `selectQueryParam(param: string): Observable\u003cstring \\| readonly string[] \\| undefined\u003e` | Select the specified query parameter.                     |\n| `selectRouteData(key: string): Observable\u003cunknown\u003e`                                     | Select the specified route data.                          |\n| `selectRouteParam(param: string): Observable\u003cstring \\| undefined\u003e`                      | Select the specified route parameter.                     |\n| `selectRouterEvents(...acceptedRouterEvents: RouterEvent[]): Observable\u003cRouterEvent\u003e`   | Select router events of the specified router event types. |\n\nA `RouterStore` service is provided by using either `provideGlobalRouterStore`or `provideLocalRouterStore`.\n\nThe _global_ `RouterStore` service is provided in a root environment injector and is never destroyed but can be injected in any injection context.\n\nIt emits values similar to `@ngrx/router-store` selectors. A comparison is in the documentation.\n\nA _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.\n\nIt emits values similar to `ActivatedRoute`. A comparison is in the documentation.\n\n#### Global router store\n\nAn application-wide router store that can be injected in any injection context. Use `provideGlobalRouterStore` to provide it in a root environment injector.\n\nUse a global router store instead of NgRx Router Store.\n\nProviding in a standalone Angular application:\n\n```typescript\n// main.ts\n// (...)\nimport { provideGlobalRouterStore } from '@ngworker/router-component-store';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideGlobalRouterStore()],\n}).catch((error) =\u003e console.error(error));\n```\n\nProviding in a classic Angular application:\n\n```typescript\n// app.module.ts\n// (...)\nimport { provideGlobalRouterStore } from '@ngworker/router-component-store';\n\n@NgModule({\n  // (...)\n  providers: [provideGlobalRouterStore()],\n})\nexport class AppModule {}\n```\n\nUsage in service:\n\n```typescript\n// hero.service.ts\n// (...)\nimport { RouterStore } from '@ngworker/router-component-store';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class HeroService {\n  #routerStore = inject(RouterStore);\n\n  activeHeroId$: Observable\u003cstring | undefined\u003e =\n    this.#routerStore.selectRouteParam('id');\n}\n```\n\nUsage in component:\n\n```typescript\n// hero-detail.component.ts\n// (...)\nimport { RouterStore } from '@ngworker/router-component-store';\n\n@Component({\n  // (...)\n})\nexport class HeroDetailComponent {\n  #routerStore = inject(RouterStore);\n\n  heroId$: Observable\u003cstring | undefined\u003e =\n    this.#routerStore.selectRouteParam('id');\n}\n```\n\n#### Local router store\n\nA component-level router store. Can be injected in any directive, component,\npipe, or component-level service. Explicitly provided in a component sub-tree\nusing `Component.providers` or `Component.viewProviders`.\n\nUse a local router store instead of `ActivatedRoute`.\n\nUsage in component:\n\n```typescript\n// hero-detail.component.ts\n// (...)\nimport {\n  provideLocalRouterStore,\n  RouterStore,\n} from '@ngworker/router-component-store';\n\n@Component({\n  // (...)\n  providers: [provideLocalRouterStore()],\n})\nexport class HeroDetailComponent {\n  #routerStore = inject(RouterStore);\n\n  heroId$: Observable\u003cstring | undefined\u003e =\n    this.#routerStore.selectRouteParam('id');\n}\n```\n\n### Serializable router state\n\nSeveral 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.\n\n#### MinimalActivatedRouteSnapshot\n\nThe `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.\n\n| API                                                 | Description                                      |\n| --------------------------------------------------- | ------------------------------------------------ |\n| `children: MinimalActivatedRouteSnapshot[]`         | The children of this route in the route tree.    |\n| `data: StrictRouteData`                             | The static and resolved data of this route.      |\n| `firstChild: MinimalActivatedRouteSnapshot \\| null` | The first child of this route in the route tree. |\n| `fragment: string \\| null`                          | The URL fragment shared by all routes.           |\n| `outlet: string`                                    | The outlet name of the route.                    |\n| `params: StrictRouteParams`                         | The matrix parameters scoped to this route.      |\n| `queryParams: StrictQueryParams`                    | The query parameters shared by all routes.       |\n| `routeConfig: Route \\| null`                        | The configuration used to match this route.      |\n| `title: string \\| undefined`                        | The resolved route title.                        |\n| `url: UrlSegment[]`                                 | The URL segments matched by this route.          |\n\n#### StrictQueryParams\n\nThe `StrictQueryParams` type is used for query parameters in the `MinimalActivatedRouteSnapshot#queryParams` and `RouterStore#queryParams$` properties. It is a strictly typed version of the Angular Router's `Params` type where members are read-only and the `any` member type is replaced with `string | readonly string[] | undefined`.\n\n`StrictQueryParams` has the following signature.\n\n```typescript\nexport type StrictQueryParams = {\n  readonly [key: string]: string | readonly string[] | undefined;\n};\n```\n\n#### StrictRouteData\n\nThe `StrictRouteData` interface is used for the `MinimalActivatedRouteSnapshot#data` and `RouterStore#routeData$` properties. 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. Additionally, the `any` member type is replaced with `unknown` for stricter typing.\n\n`StrictRouteData` has the following signature.\n\n```typescript\nexport type StrictRouteData = {\n  readonly [key: string]: unknown;\n};\n```\n\n#### StrictRouteParams\n\nThe `StrictRouteParams` type is used for route parameters in the `MinimalActivatedRouteSnapshot#params` and `RouterStore#routeParams$` properties. It is a strictly typed version of the Angular Router's `Params` type where members are read-only and the `any` member type is replaced with `string | undefined`.\n\n`StrictRouteParams` has the following signature.\n\n```typescript\nexport type StrictRouteParams = {\n  readonly [key: string]: string | undefined;\n};\n```\n","funding_links":["https://github.com/sponsors/LayZeeDK"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngworker%2Frouter-component-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngworker%2Frouter-component-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngworker%2Frouter-component-store/lists"}