{"_id":"@brannon2/ngx-breadcrumbs","_rev":"1-d9867a150a65f3f4c198d7784fb68bd5","name":"@brannon2/ngx-breadcrumbs","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@brannon2/ngx-breadcrumbs","version":"0.0.1","description":"Angular 4+ routing breadcrumbs","author":{"email":"noreplies@hotmail.com","url":"null"},"license":"MIT","private":false,"repository":{"type":"git","url":"git+https://github.com/McNull/ngx-breadcrumbs.git"},"keywords":["angular","angular4","breadcrumbs","routing"],"homepage":"https://github.com/McNull/ngx-breadcrumbs","dependencies":{"lodash.template":"^4.4.0"},"peerDependencies":{"@angular/core":">=4.0.0 <5.0.0 || >=4.0.0-beta <5.0.0","@angular/router":">=4.0.0 <5.0.0"},"main":"bundles/ngx-breadcrumbs.umd.js","module":"@brannon2/ngx-breadcrumbs.es5.js","es2015":"@brannon2/ngx-breadcrumbs.js","typings":"ngx-breadcrumbs.d.ts","metadata":"ngx-breadcrumbs.metadata.json","bugs":{"url":"https://github.com/McNull/ngx-breadcrumbs/issues"},"_id":"@brannon2/ngx-breadcrumbs@0.0.1","_npmVersion":"6.3.0","_nodeVersion":"8.9.4","_npmUser":{"name":"ngx-logic","email":"bdarby86@gmail.com"},"dist":{"integrity":"sha512-L0HV5m4BtoQe9t5VYBhLW44fCvu9AUJuoxKxAaG0Jjs3khY2+HIsFtfWS8FOFKRVZ+3QzSMZ09goWI6PxxQEVA==","shasum":"036cad55f7777945d424aec3e3302d766c216b25","tarball":"https://registry.npmjs.org/@brannon2/ngx-breadcrumbs/-/ngx-breadcrumbs-0.0.1.tgz","fileCount":20,"unpackedSize":3720398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkpB1CRA9TVsSAnZWagAAynMP/A/rDfpavMFKrSBErK7/\ngAQ+WKXmev4vTnJ9JOW8aoKxdMI8ZV3QjQ1958jSea6xHAjQ/xlQP2gf4EqZ\naWqT5mXSsDjslageWXkjy5UTbBbWDM1V1sXPvemTHa0ZxxG5cX9RFLFbt7tJ\ncXUcNNJnBKfNP2pxHA4XGHLpoRsufLvgZPs2rRLf12S9D4D+TrzvMirdpIFA\n/GX813kHQiNheVNqG9bi3HMX6w0P9qont7o+EJZ1mUwtQQrIxT9hAbYoXxjS\no9nP8d397VvvgmRfaOQENMZNT3mHNKlaoii4RosOasxqdkm0WtyO7+i3nali\nR6PToohi0LwUAsghIotaaggUid5Na2y4+dS/zNCeLeiEvWKyy0qL1e1ReJQB\nCsin+J5jqQHTSqIsV+B9NgybbiegbxxCBx82AX4k/xHdxcHuylkHx4My+81N\nqB0bKeNpegmKO/m7WEiT7FsolAYNTQgMMYjt+S1UYbRKrMYpitD5fWpwkJtt\nkdMm/hxI7c2filV3qiL5WMEoJ2CiyIcUX1x/kMmGxTZ1FRIl0zsT01xJJTkf\nAxTeJFuX+UIu9lTYmKmpsIbWspCUFn7vvYTYMjAjvXl3HomjvjjR18dXXSM+\ncnJK+6VFLFPvD9yyjOHH5y79uIEegSd+lssNxgqDAjIfneACr4ZK5vwC2j+R\nqmko\r\n=nwHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3qQmgvrrgoKk4Z78tBHDVRGY4qdbLiJF0frowgYHzOgIhAPYxePf9zp7VLDJt6Af9yVT/HHm2C/pChKubXr3V6ttj"}]},"maintainers":[{"name":"ngx-logic","email":"bdarby86@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-breadcrumbs_0.0.1_1536331892253_0.13411627838020945"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-07T14:51:32.086Z","0.0.1":"2018-09-07T14:51:32.444Z","modified":"2022-04-04T20:26:51.662Z"},"maintainers":[{"name":"ngx-logic","email":"bdarby86@gmail.com"}],"description":"Angular 4+ routing breadcrumbs","homepage":"https://github.com/McNull/ngx-breadcrumbs","keywords":["angular","angular4","breadcrumbs","routing"],"repository":{"type":"git","url":"git+https://github.com/McNull/ngx-breadcrumbs.git"},"author":{"email":"noreplies@hotmail.com","url":"null"},"bugs":{"url":"https://github.com/McNull/ngx-breadcrumbs/issues"},"license":"MIT","readme":"# Ngx-Breadcrumbs\nAn Angular (4+) module generating breadcrumbs based on the routing state.\n\n## Installation\n```bash\n# install via npm\n$ npm --save install ngx-breadcrumbs\n```\n```bash\n# install via yarn\n$ yarn add ngx-breadcrumbs\n```\n\n## Usage\n\nImport the `McBreadcrumbsModule` in your root module (`app.module.ts`) after \nimporting the _router_ module. \n\n```javascript\nimport { RouterModule } from '@angular/router';\nimport { McBreadcrumbsModule } from 'ngx-breadcrumbs';\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(myRoutes),\n    McBreadcrumbsModule.forRoot()\n  ],  \n})\nexport class AppModule {}\n```\n\nPlace the `mc-breadcrumbs` component, which will render the breadcrumbs, \nsomewhere in your markup.\n\n```javascript\n@Component({\n  selector: 'app-root',\n  template: `\n    <div class=\"container\">\n      <mc-breadcrumbs></mc-breadcrumbs>\n      <router-outlet></router-outlet>\n    </div>`\n})\nexport class AppComponent {}\n```\n\nUsage of the `mc-breadcrumbs` render component is optional. If a different \nmarkup output is desired, a custom component can be created that subscribes to \nthe `McBreadcrumbsService.crumbs$` observable.  \n\n### Routing Configuration\n\nBreadcrumbs links are generated based on the route configuration. If a route \nentry contains a `data.breadcrumbs` property the _breadcrumbs service_ assumes \nbreadcrumbs should be created whenever this route or one its child routes are \nactive. \n\n```javascript\nconst myRoutes : Route[] = {\n  {\n    path: '',\n    component: HomeComponent,\n    data: {\n      // Uses static text (Home)\n      breadcrumbs: 'Home' \n    }\n  },\n  {\n    path: 'about',\n    component: AboutComponent,\n    data: {\n      // Uses last urlfragment (about) as text\n      breadcrumbs: true \n    }\n  },\n  {\n    path: 'person',\n    data: {\n      // Uses text property (Person)\n      breadcrumbs: true,\n      text: 'Person'\n    },\n    children: [\n      {\n          path: '',\n          component: PersonListComponent\n      },\n      {\n          path: ':id',\n          component: PersonDetailComponent,\n          data: {\n            // Interpolates values resolved by the router \n            breadcrumbs: '{{ person.name }}'\n          },\n          resolve: {\n            person: PersonResolver\n          }\n      } \n    ]\n  },    \n  {\n    path: 'folder',\n    data: {\n      // Uses static text 'Folder'\n      breadcrumbs: 'Folder'\n    },\n    children: [\n      {\n      path: '',\n      component: FolderComponent\n      },\n      {\n        path: ':id',\n        component: FolderComponent,\n        data: {\n          // Resolves the breadcrumbs for this route by\n          // implementing a McBreadcrumbsResolver class.\n          breadcrumbs: FolderBreadcrumbsResolver\n        }\n      }\n    ]\n  }\n};\n```\n\n### API\n\n#### IBreadcrumb\nThe IBreadcrumb interface defines the properties of the breadcrumb items.\n\n```javascript\nexport interface IBreadcrumb {\n  text: string,  // The text to display \n  path: string   // The associated path\n}\n```\n\n#### McBreadcrumbsComponent\nThe component simply renders the list of the `IBreadcrumb` items \nprovided by the `McBreadcrumbsService`. The HTML output matches that of \n[Bootstrap 4 markup](https://getbootstrap.com/docs/4.0/components/breadcrumb/). \n\nA custom breadcrumb component is easily created by injecting the breadcrumb \nservice and iterating over the breadcrumb items. \n\n#### McBreadcrumbsService\nThe service has one public property `crumbs$`. It's an observable stream of \n`IBreadcrumb[]`, which is updated after each route change.  \n\n#### McBreadcrumbsResolver\nIf needed, a custom resolver can be implemented which is activated whenever a \ncertain route becomes active. This can be useful whenever the route \nconfiguration cannot match the desired breadcrumb hierachy. \n\nThe signature of the resolver implements `Resolve<T>` from the \n[Angular Router](https://angular.io/api/router/Resolve) and needs to resolve an \narray of `IBreadcrumb` items. \n\nTo associate a route with a certain resolver, it breadcrumbs data property in \nthe route configuration should point to the resolver:\n\n```javascript\nconst myRoutes = [\n  {\n    path: 'somepath',\n    component: SomeComponent,\n    data: {\n      breadcrumbs: MyBreadcrumbsResolver\n    }\n  }\n];\n```\n\n##### Members\n\n```javascript\n// Should resolve zero or more IBreadcrumb items.\nfunction resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)\n  : Observable<T>|Promise<T>|T \n```\n\n```javascript\n// Helper function that returns the full path for the provided route snapshot.\nfunction getFullPath(route: ActivatedRouteSnapshot) \n  : string\n```\n\n##### Example\n\n```javascript\n@Injectable()\nexport class MyBreadcrumbsResolver inherits McBreadcrumbsResolver {\n\n  // Optional: inject any required dependencies\n  constructor(private myService: MyService) {}\n\n  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {\n    \n    const myFolderId = route.params.id;\n    const myCrumbs = \n      this.myService.getFolders(myFolderId)\n                    .map((folder) => ({\n                      text: folder.title,\n                      path: super.getFullPath(route.parent) + '/' + folder.id\n                    });\n\n    // Note: the resolve method can return any of the following types:\n    //\n    //   * IBreadcrumb[]\n    //   * Observable<IBreadcrumb[]>\n    //   * Promise<IBreadcrumb>\n\n    return myCrumbs; \n  }\n}\n```\n\n#### McBreadcrumbsConfig\nThe configuration of the breadcrumbs module. \n\n##### Members\n\n**postProcess**\n\nCallback function with the following signature:\n\n```javascript\nfunction (crumbs: IBreadcrumb[]) : Promise<IBreadcrumb[]> | Observable<IBreadcrumb[]> | IBreadcrumb[];\n```\n\nCan be used to make custom changes to the breadcrumb array after the service\nhas constructed the breadcrumb trail.\n\nExample:\n```javascript\n@NgModule({\n  /* ... */\n})\nexport class AppModule {\n  constructor(breadcrumbsConfig: McBreadcrumbsConfig) {\n\n    breadcrumbsConfig.postProcess = (x) => {\n\n      // Ensure that the first breadcrumb always points to home\n\n      let y = x;\n\n      if(x.length && x[0].text !== 'Home') {\n        y = [\n          {\n            text: 'Home',\n            path: ''\n          }\n        ].concat(x);\n      }\n\n      return y;\n    };\n  }\n}\n```\n","readmeFilename":"README.md"}