{"id":17605567,"url":"https://github.com/henczi/ngx-crumbs","last_synced_at":"2025-03-09T03:31:35.543Z","repository":{"id":57310925,"uuid":"355079356","full_name":"henczi/ngx-crumbs","owner":"henczi","description":"An ultimate breadcrumbs service for Angular.","archived":false,"fork":false,"pushed_at":"2023-02-25T11:51:08.000Z","size":306,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T17:41:20.195Z","etag":null,"topics":["angular","breadcrumb","breadcrumbs","ng","ngx-crumbs"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/ngx-crumbs-demo","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/henczi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-06T06:22:43.000Z","updated_at":"2024-10-21T23:41:40.000Z","dependencies_parsed_at":"2022-09-05T16:31:00.225Z","dependency_job_id":null,"html_url":"https://github.com/henczi/ngx-crumbs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henczi%2Fngx-crumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henczi%2Fngx-crumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henczi%2Fngx-crumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henczi%2Fngx-crumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henczi","download_url":"https://codeload.github.com/henczi/ngx-crumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242640885,"owners_count":20162051,"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","breadcrumb","breadcrumbs","ng","ngx-crumbs"],"created_at":"2024-10-22T15:01:15.157Z","updated_at":"2025-03-09T03:31:35.534Z","avatar_url":"https://github.com/henczi.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# NgxCrumbs\n\nAn ultimate breadcrumbs service for Angular.\n\nDemo on [StackBlitz](https://stackblitz.com/edit/ngx-crumbs-demo)\n## Getting started\n### Install via NPM\n```\nnpm i ngx-crumbs\n```\n### Import the `NgxCrumbsModule`\n```ts\n@NgModule({\n  /* ... */\n  imports: [\n    /* ... */\n    NgxCrumbsModule,\n  ],\n})\n\nexport class AppModule { }\n```\n\n## Usage\n\nUse the `ngx-crumbs` component to display the breadcrumbs\n\n```html\n\u003c!-- The 'breadcrumb' and 'breadcrumb-item' classes are Bootstrap specific  --\u003e\n\u003cngx-crumbs containerClass=\"breadcrumb\" itemClass=\"breadcrumb-item\"\u003e\n\u003c/ngx-crumbs\u003e\n```\n\n\u003e You can create a full custom look by using the `NgxCrumbsService.crumbs$` observable\n\n### Defining crumbs in Routes\n```ts\n// app-routing.module.ts\nconst routes: Routes = [\n  {\n    path: '',\n    data: { crumb: 'Home' }\n    /* component: ... */\n  },\n  {\n    path: 'profile',\n    data: { crumb: 'Profile' },\n    /* component: ... */\n    children: [\n      path: 'settings',\n      data: { crumb: 'Settings' },\n      /* component: ... */\n    ]\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n```\n\n### Defining crumbs in a component\n\n```html\n\u003c!-- profile.component.html --\u003e\n\n\u003cngx-crumb text=\"Profile\"\u003e\u003c/ngx-crumb\u003e\n\n\u003c!-- profile nav, content ... --\u003e\n```\n\n## Configuring\n\n|parameter|default|description|\n|--|--|--|\n|noLink|false|true, if the crumb should not point to a path|\n|link|undefined||\n\n### Dynamic crumb text\n\nIf your breadcrumb depends on dynamic data, you can also pass a function to the `crumb` (or `crumb.text`). This function receives an object containing three fields - `data`, `params` and `queryParams`.\n\n```ts\nconst routes: Routes = [\n  { path: '...', data: { crumb: ({ data, params, queryParams }) =\u003e `...` } },\n  /* OR */\n  {\n    path: '...',\n    data: {\n      crumb: {\n        text: ({ data, params, queryParams }) =\u003e `...` }\n      }\n    },\n  }\n];\n```\n\nIn a component you can data-bind all available variables.\n\n```html\n\u003c!-- post.component.html --\u003e\n\u003cngx-crumb text=\"{{ post.name }}\"\u003e\u003c/ngx-crumb\u003e\n```\n\n### Override default link\n```ts\nconst routes: Routes = [\n  {\n    path: 'post/:id',\n    resolve: { post: PostResolver },\n    data: {\n      crumb: [\n        { text: 'Posts', link: '/posts' },\n        { text: ({ data }) =\u003e `${data.post.name}` },\n      ]\n    },\n    component: PostComponent\n  }\n];\n```\n\n```html\n  \u003cngx-crumb text=\"Posts\" link=\"/posts\"\u003e\u003c/ngx-crumb\u003e\n  \u003cngx-crumb text=\"{{post.name}}\"\u003e\u003c/ngx-crumb\u003e\n```\n\n### Multiple crumbs per component\n\n\n```ts\nconst routes: Routes = [\n  { path: 'posts', data: { crumb: 'Posts' } },\n  {\n    path: 'post/:id',\n    data: {\n      crumb: [\n        { text: 'Posts', link: '/posts' },\n        { text: ({ params }) =\u003e `Post: ${params.id}` },\n      ]\n    },\n    /* component: ... */\n  }\n];\n```\n\n```html\n\u003c!-- /item/:id --\u003e\n\u003cng-container *ngIf=\"!isRevision\"\u003e\n  \u003cngx-crumb text=\"{{ item.name }}\"\u003e\u003c/ngx-crumb\u003e\n\u003c/ng-container\u003e\n\n\u003c!-- /item/:id?revision=\u003crevision_date\u003e --\u003e\n\u003cng-container *ngIf=\"isRevision\"\u003e\n  \u003cngx-crumb text=\"{{ item.name }}\" link=\".\"\u003e\u003c/ngx-crumb\u003e \u003c!-- points to: /item/:id --\u003e\n  \u003cngx-crumb text=\"Revisions\" [link]=\"['revisions']\"\u003e\u003c/ngx-crumb\u003e \u003c!-- points to: /item/:id/revisions --\u003e\n  \u003cngx-crumb text=\"{{ item.revisionDate | date }}\"\u003e\u003c/ngx-crumb\u003e\n\u003c/ng-container\u003e\n```\n\n## Document title\n\n```ts\nexport class AppComponent {\n\n  constructor(public crumbsService: NgxCrumbsService) {\n    crumbsService.crumbs$.subscribe(x =\u003e document.title = x.length\n      ? `${x[x.length-1].text} | Demo`\n      : 'Demo'\n    )\n  }\n\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenczi%2Fngx-crumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenczi%2Fngx-crumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenczi%2Fngx-crumbs/lists"}