{"_id":"@alevettih/ngx-route-breadcrumbs","_rev":"4-20102598cf29066ea5179f902c146c53","name":"@alevettih/ngx-route-breadcrumbs","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@alevettih/ngx-route-breadcrumbs","version":"0.0.1","keywords":["angular","breadcrumbs"],"author":{"name":"Alexandr Tikhonenko","email":"alevettih@ya.ru"},"license":"MIT","_id":"@alevettih/ngx-route-breadcrumbs@0.0.1","maintainers":[{"name":"alevet","email":"alevettih@ya.ru"}],"homepage":"https://github.com/alevettih/ngx-route-breadcrumbs","bugs":{"url":"https://github.com/alevettih/ngx-route-breadcrumbs/issues"},"dist":{"shasum":"3f455d0a8f7fb81d3836ba000d5dae479a6f5fd5","tarball":"https://registry.npmjs.org/@alevettih/ngx-route-breadcrumbs/-/ngx-route-breadcrumbs-0.0.1.tgz","fileCount":6,"integrity":"sha512-fWpkoVLFwmoxjiPEKYE8Ej8ste9cO5ZAihrUpmdPNaJ8RQN0E7QEEN4y4zUfLUoTfhDE/TGPxm0YcOfGgP5ilg==","signatures":[{"sig":"MEUCIDaLFYNSHG56yAfZW3H8PFHjt0GDzT140y1G4hg4yzsRAiEAnMTZNnl0DFJe259sieXQ8ewDJvyYsFva108/4TAUVwY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37701},"module":"fesm2022/alevettih-ngx-route-breadcrumbs.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/alevettih-ngx-route-breadcrumbs.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"4ab6420d318a914e4a3213513c2ca2b9657f4982","typings":"index.d.ts","_npmUser":{"name":"alevet","email":"alevettih@ya.ru"},"repository":{"url":"git+https://github.com/alevettih/ngx-route-breadcrumbs.git","type":"github"},"_npmVersion":"11.6.2","description":"An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"es-toolkit":"^1.41.0","@angular/core":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/common":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/router":"^18.0.0 || ^19.0.0 || ^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-route-breadcrumbs_0.0.1_1762806065404_0.4921676463602973","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alevettih/ngx-route-breadcrumbs","version":"0.0.2","keywords":["angular","breadcrumbs"],"author":{"name":"Alexandr Tikhonenko","email":"alevettih@ya.ru"},"license":"MIT","_id":"@alevettih/ngx-route-breadcrumbs@0.0.2","maintainers":[{"name":"alevet","email":"alevettih@ya.ru"}],"homepage":"https://github.com/alevettih/ngx-route-breadcrumbs","bugs":{"url":"https://github.com/alevettih/ngx-route-breadcrumbs/issues"},"dist":{"shasum":"8b5f636061710c07d34a6b8113449b8e3813d607","tarball":"https://registry.npmjs.org/@alevettih/ngx-route-breadcrumbs/-/ngx-route-breadcrumbs-0.0.2.tgz","fileCount":6,"integrity":"sha512-QJcK6YrzUj31TKc0LfPXJcz9HlNHumb+vSzrnjIqEj7305vJCG/+hw8090rJH58dY6Dn5Owcwqu31ot8DlU5og==","signatures":[{"sig":"MEUCIBucNTjhzuHWOxHkA09+F21wBu2TIi8gG4oJLbp91shjAiEAo2ukaSa8+FcXbpq4AtkGsjVW+ZD68qBOdQKQmXAI7KM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37701},"module":"fesm2022/alevettih-ngx-route-breadcrumbs.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/alevettih-ngx-route-breadcrumbs.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"05cc68f475efd19616d670c37f71f2e4c00419eb","typings":"index.d.ts","_npmUser":{"name":"alevet","email":"alevettih@ya.ru"},"repository":{"url":"git+https://github.com/alevettih/ngx-route-breadcrumbs.git","type":"github"},"_npmVersion":"11.6.1","description":"An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"es-toolkit":"^1.41.0","@angular/core":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/common":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/router":"^18.0.0 || ^19.0.0 || ^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-route-breadcrumbs_0.0.2_1762865766108_0.24100526448012127","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@alevettih/ngx-route-breadcrumbs","version":"0.1.0","keywords":["angular","breadcrumbs"],"author":{"name":"Alexandr Tikhonenko","email":"alevettih@ya.ru"},"license":"MIT","_id":"@alevettih/ngx-route-breadcrumbs@0.1.0","maintainers":[{"name":"alevet","email":"alevettih@ya.ru"}],"homepage":"https://github.com/alevettih/ngx-route-breadcrumbs","bugs":{"url":"https://github.com/alevettih/ngx-route-breadcrumbs/issues"},"dist":{"shasum":"b7d13a11bfa95c9c80762ce3e4e0517966c0023d","tarball":"https://registry.npmjs.org/@alevettih/ngx-route-breadcrumbs/-/ngx-route-breadcrumbs-0.1.0.tgz","fileCount":6,"integrity":"sha512-I+1lIZnJ6YN9ot+40lREVnjuhqAqnIzQ602yF8rIs2QIpvcbQcpdNUPgnEBl3l9BEs6524NQ7PtdjbFHBB6mQg==","signatures":[{"sig":"MEQCIBwiizoA7QHowPk/zuwj4xqgrONuL10K0X3+MK2zGQa1AiAca8Vjymx/BH2/1H74HvfKUDHMZXBkLCDkY3TxrS9W8w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37968},"module":"fesm2022/alevettih-ngx-route-breadcrumbs.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/alevettih-ngx-route-breadcrumbs.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"c64ec48e60807eb426335d93bc83c64be968c281","typings":"index.d.ts","_npmUser":{"name":"alevet","email":"alevettih@ya.ru"},"repository":{"url":"git+https://github.com/alevettih/ngx-route-breadcrumbs.git","type":"github"},"_npmVersion":"11.6.2","description":"An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.","directories":{},"sideEffects":false,"_nodeVersion":"24.11.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"es-toolkit":"^1.41.0","@angular/core":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/common":"^18.0.0 || ^19.0.0 || ^20.0.0","@angular/router":"^18.0.0 || ^19.0.0 || ^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-route-breadcrumbs_0.1.0_1763310554030_0.6520779612454188","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@alevettih/ngx-route-breadcrumbs","version":"1.0.0","homepage":"https://github.com/alevettih/ngx-route-breadcrumbs","author":{"name":"Alexandr Tikhonenko","email":"alevettih@ya.ru"},"peerDependencies":{"@angular/common":">=18.0.0","@angular/core":">=18.0.0","@angular/router":">=18.0.0","es-toolkit":"^1.41.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"license":"MIT","keywords":["angular","breadcrumbs"],"repository":{"type":"github","url":"git+https://github.com/alevettih/ngx-route-breadcrumbs.git"},"bugs":{"url":"https://github.com/alevettih/ngx-route-breadcrumbs/issues"},"module":"fesm2022/alevettih-ngx-route-breadcrumbs.mjs","typings":"types/alevettih-ngx-route-breadcrumbs.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/alevettih-ngx-route-breadcrumbs.d.ts","default":"./fesm2022/alevettih-ngx-route-breadcrumbs.mjs"}},"gitHead":"2a605de1bb117d288faf09b3c66b11290f0c88db","_id":"@alevettih/ngx-route-breadcrumbs@1.0.0","description":"An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-orTsrZwVh6cGBavkaKjgRM7pw1LaBMUEgX5UM5Qnih+yokr6WsuIphjsrxpdGYxXAv9IiIY/9uNn9QhVdsDT2g==","shasum":"a6ce643b45dda7b5842f5cecb1980395798bb1c9","tarball":"https://registry.npmjs.org/@alevettih/ngx-route-breadcrumbs/-/ngx-route-breadcrumbs-1.0.0.tgz","fileCount":6,"unpackedSize":37934,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCW0HHP9k0c0hxMGB4wtA7h7tT35u00jyIJA1hdpPsX2gIgQmWy98SOom6NQC2zkQoXxx05t1qIr8GVwpDIW9ltUm0="}]},"_npmUser":{"name":"alevet","email":"alevettih@ya.ru"},"directories":{},"maintainers":[{"name":"alevet","email":"alevettih@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-route-breadcrumbs_1.0.0_1764069376685_0.8637338512704049"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T20:21:05.262Z","modified":"2025-11-25T11:16:17.130Z","0.0.1":"2025-11-10T20:21:05.606Z","0.0.2":"2025-11-11T12:56:06.289Z","0.1.0":"2025-11-16T16:29:14.234Z","1.0.0":"2025-11-25T11:16:16.887Z"},"bugs":{"url":"https://github.com/alevettih/ngx-route-breadcrumbs/issues"},"author":{"name":"Alexandr Tikhonenko","email":"alevettih@ya.ru"},"license":"MIT","homepage":"https://github.com/alevettih/ngx-route-breadcrumbs","keywords":["angular","breadcrumbs"],"repository":{"type":"github","url":"git+https://github.com/alevettih/ngx-route-breadcrumbs.git"},"description":"An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.","maintainers":[{"name":"alevet","email":"alevettih@ya.ru"}],"readme":"# @alevettih/ngx-route-breadcrumbs\n\nAn Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.\n\n## Installation\n\n```bash\nnpm install @alevettih/ngx-route-breadcrumbs\n```\n\n### Requirements\n\n- Angular 18+\n- RxJS 7.8+\n- es-toolkit 1.41+\n\n## Features\n\n- ✅ Create breadcrumbs from routing info.\n- ✅ Provide routing data/params into breadcrumbs with interpolation.\n- ✅ Return metadata for implementing a \"Back\" button.\n- ✅ Programmatically manipulate breadcrumbs (changes are rolled back when the contributing component is destroyed).\n- ✅ Transform links based on route data (`transformLink` method).\n\n## Quick Start\n\n### 1. Provide the service\n\nImport `provideRouteBreadcrumbsService` in your `app.config.ts` or `main.ts`:\n\n```typescript\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouteBreadcrumbsService } from '@alevettih/ngx-route-breadcrumbs';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideRouteBreadcrumbsService(),\n // ... other providers\n ],\n};\n```\n\n### 2. Set breadcrumb config to route\n\n```typescript\nimport { Routes } from '@angular/router';\nimport {\n RouteBreadcrumbConfig,\n RouteBreadcrumbMeta,\n setBreadcrumb,\n} from '@alevettih/ngx-route-breadcrumbs';\n\nexport const appRoutes: Routes = [\n {\n path: 'user',\n data: {\n breadcrumb: {\n key: 'Breadcrumbs.User.Root',\n transformLink: (url: string, meta: RouteBreadcrumbMeta): string =>\n meta['userId'] ? `${url}/quick/${meta['userId']}` : url,\n },\n },\n children: [\n {\n path: ':userId',\n resolve: { user: userResolver },\n component: UserEditComponent,\n data: {\n // setBreadcrumb helps provide the correct configuration shape.\n breadcrumb: setBreadcrumb({\n key: 'Breadcrumbs.User.Edit',\n params: {\n name: ':user.name',\n },\n }),\n },\n children: [\n // child routes...\n ],\n },\n ],\n },\n];\n```\n\n### 3. Create your breadcrumbs component\n\n```typescript\nimport {\n ChangeDetectionStrategy,\n Component,\n inject,\n output,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport {\n RouteBreadcrumb,\n RouteBreadcrumbsService,\n} from '@alevettih/ngx-route-breadcrumbs';\n\n@Component({\n selector: 'breadcrumbs',\n styleUrl: './breadcrumbs.component.less',\n templateUrl: `\n @if (breadcrumbs().length) {\n \n }\n `,\n imports: [RouterLink],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BreadcrumbsComponent {\n public readonly service = inject(RouteBreadcrumbsService);\n\n public readonly breadcrumbs = this.service.items;\n\n public readonly choose = output();\n\n public onBreadcrumbClick(\n event: MouseEvent,\n breadcrumb: RouteBreadcrumb,\n ): void {\n this.choose.emit(breadcrumb);\n breadcrumb.action?.(event);\n }\n}\n```\n\n> **Note:** The component is provided as an example only - create your own based on your business logic.\n\n### 4. Dynamically add/patch breadcrumbs (optional)\n\n```typescript\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n inject,\n} from '@angular/core';\nimport { RouteBreadcrumbsService } from '@alevettih/ngx-route-breadcrumbs';\n\n@Component({\n selector: 'test-component',\n templateUrl: './test-component.component.html',\n styleUrls: ['./test-component.component.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TestComponent {\n private readonly destroyRef = inject(DestroyRef);\n private readonly breadcrumbs = inject(RouteBreadcrumbsService);\n\n private extendBreadcrumbs(): void {\n this.breadcrumbs.extend(\n {\n add: [{ key: 'ProcessSegmentSpecificationElementsSelectModal.Title' }],\n patch: [\n {\n index: -1,\n action: (): void => this.close(),\n link: null,\n },\n ],\n },\n this.destroyRef,\n );\n }\n}\n```\n\n## API Reference\n\n### RouteBreadcrumbsService\n\n| Method | Description |\n| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |\n| `items(): Signal` | Computed signal that combines router-derived breadcrumbs with temporary overrides. |\n| `backItem(): Signal` | Computed signal that returns a breadcrumb suited for “Back” navigation (the penultimate item, or the first if only one exists). |\n| `extend(params: RouteBreadcrumbsExtendFnParams, destroyRef: DestroyRef): void` | Adds items from `params.add`, applies patches from `params.patch`, and automatically rolls back changes when `destroyRef` fires. |\n\n### Helpers\n\n| Helper | Description |\n| ---------------------------------- | ---------------------------------------------------------------------------------------- |\n| `provideRouteBreadcrumbsService()` | Environment provider that wires up the service and eagerly initializes breadcrumbs. |\n| `setBreadcrumb(config)` | Utility for building a `RouteBreadcrumbConfig` with dynamic param interpolation support. |\n\n### Models & Types\n\n#### RouteBreadcrumb\n\n| Field | Type | Description |\n| -------- | -------------------------------- | ---------------------------------------------------------------------------- |\n| `key` | `string` | Translation key or identifier displayed in the UI. |\n| `link` | `string \\| null` | Optional router link; omit or set to `null` to render a non-link breadcrumb. |\n| `action` | `(event: MouseEvent) => unknown` | Optional click handler invoked when the breadcrumb is selected. |\n| `icon` | `string` | Optional icon token for visual decorators. |\n| `params` | `Record` | Optional key/value pairs supplied to translation pipes or templates. |\n\n#### RouteBreadcrumbConfig\n\nExtends `RouteBreadcrumb` (without the `link` property) and adds configuration-only behaviour.\n\n| Field | Type | Description |\n| --------------- | -------------------------------- | ------------------------------------------------------------------------------- |\n| `key` | `string` | Inherited identifier propagated to the rendered breadcrumb. |\n| `action` | `(event: MouseEvent) => unknown` | Optional action executed when the breadcrumb is activated. |\n| `icon` | `string` | Optional icon token used by UI renderers. |\n| `params` | `Record` | Optional interpolation data available to templates. |\n| `transformLink` | `RouteBreadcrumbTransformLinkFn` | Optional per-route hook that adjusts the generated link using current metadata. |\n\n#### RouteBreadcrumbsExtendFnParams\n\n| Field | Type | Description |\n| ------- | ------------------- | ------------------------------------------------------------------------- |\n| `add` | `RouteBreadcrumb[]` | Optional list of breadcrumbs to append after router-derived items. |\n| `patch` | `PatchBreadcrumb[]` | Optional set of partial updates applied to existing breadcrumbs by index. |\n\n#### RouteBreadcrumbMeta\n\n| Alias | Expands To | Description |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------ |\n| `RouteBreadcrumbMeta` | `Data & Params` | Combined Angular `data` and `params` objects exposed to interpolation and transform hooks. |\n\n#### RouteBreadcrumbTransformLinkFn\n\n| Item | Type | Description |\n| -------- | --------------------- | ------------------------------------------------------------------ |\n| `link` | `string` | The link generated from routing information before transformation. |\n| `meta` | `RouteBreadcrumbMeta` | Aggregated metadata for the current route chain. |\n| `return` | `string` | The adjusted link returned to the breadcrumb service. |\n\n#### PatchBreadcrumb\n\n| Field | Type | Description |\n| -------- | -------------------------------- | ---------------------------------------------------------------- |\n| `index` | `number` | Index of the breadcrumb to update within the current collection. |\n| `key` | `string` | Optional replacement key. |\n| `link` | `string \\| null` | Optional replacement link. |\n| `action` | `(event: MouseEvent) => unknown` | Optional replacement action. |\n| `icon` | `string` | Optional replacement icon token. |\n| `params` | `Record` | Optional replacement interpolation parameters. |\n\n## Compatibility\n\n- **Angular:** 18.0.0+\n- **TypeScript:** Use the version supported by your Angular release (Angular 18+ currently requires TypeScript 5.4 or newer)\n- **RxJS:** 7.8+\n- **es-toolkit:** 1.41+\n\n## License\n\nThis library is distributed under the [MIT](LICENSE) license.\n\n## Support\n\nIf you have questions or run into issues, please open an issue in the project repository.\n","readmeFilename":"README.md"}