{"id":13481533,"url":"https://github.com/gmostert/ng2-breadcrumb","last_synced_at":"2025-04-09T18:16:34.212Z","repository":{"id":57149290,"uuid":"53114671","full_name":"gmostert/ng2-breadcrumb","owner":"gmostert","description":"This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.","archived":false,"fork":false,"pushed_at":"2018-02-09T14:47:23.000Z","size":173,"stargazers_count":102,"open_issues_count":47,"forks_count":79,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T16:04:38.171Z","etag":null,"topics":[],"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/gmostert.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":"2016-03-04T07:00:29.000Z","updated_at":"2023-08-18T14:16:13.000Z","dependencies_parsed_at":"2022-08-31T20:02:41.225Z","dependency_job_id":null,"html_url":"https://github.com/gmostert/ng2-breadcrumb","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/gmostert%2Fng2-breadcrumb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmostert%2Fng2-breadcrumb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmostert%2Fng2-breadcrumb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmostert%2Fng2-breadcrumb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmostert","download_url":"https://codeload.github.com/gmostert/ng2-breadcrumb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018049,"owners_count":21034046,"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":[],"created_at":"2024-07-31T17:00:52.588Z","updated_at":"2025-04-09T18:16:34.186Z","avatar_url":"https://github.com/gmostert.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# ng2-breadcrumb\nThis component generates a breadcrumb trail, as you navigate to child routes using the @angular/router. It interprets the browser URL of a navigate request, \nin the same way the component router does to match a path to a specific component, to build up a hierarchy of available parent/child routes for that destination.\n\nSo given a navigation request to a url '/comp1/comp2/comp3', a breadcrumb trail with 3 levels will be generated. Each level includes all the elements from the previous \nlevel along with the next child. Thus the above url request will result in the following 3 levels being generated: '/comp1', '/comp1/comp2', '/comp1/comp2/comp3'.\n\nTheres a breadcrumbService that allows you to add friendly names for each of your app's available routes. This friendly name will show up in the breadcrumb trail \nfor each matching level, otherwise it will show the last url fragment.\n\n## Dependencies\nOptionally uses bootstrap.css (v 3.x.x) for styling of some elements (although the component is fully functional without it and there is a flag to turn off the dependency).\n\n## Install\nInstall the module via npm:\n\n    npm install ng2-breadcrumb --save\n\n## Usage\nImport the this module into your module using forRoot()\n\n    import {Ng2BreadcrumbModule} from 'ng2-breadcrumb/ng2-breadcrumb';\n\n\t@NgModule({\n        imports: [Ng2BreadcrumbModule.forRoot()]\n    })\n    export class AppModule {\n        ...\n    }\n\nAlternatively you can import the this module into your module and manually provide its service\n\n\timport {Ng2BreadcrumbModule, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';\n\n\t@NgModule({\n        imports: [Ng2BreadcrumbModule],\n        providers: [BreadcrumbService]\n    })\n    export class AppModule {\n        ...\n    }\n\t\nInject the BreadcrumbService into your component to map your routes\n\n    export class AppComponent {\n        constructor(private breadcrumbService: BreadcrumbService) {\n        }\n    }\n\nPlace the breadcrumb selector in your component's html where you added your router-outlet:\n\n\t\u003cbreadcrumb\u003e\u003c/breadcrumb\u003e\n\t\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\t\n## Directives\n`useBootstrap: boolean` to apply the bootstrap breadcrumb style. Defaulted to true.\n\n\t\u003cbreadcrumb [useBootstrap]=\"false\"\u003e\u003c/breadcrumb\u003e\n\t\n`prefix: string` to have a static prefix as the first breadcrumb which routes to the base root when clicked.\n\n\t\u003cbreadcrumb prefix=\"App Title\"\u003e\u003c/breadcrumb\u003e\n    \n## BreadcrumbService\nAdd friendly names for each of your app's routes (paths). Can also specify regular expressions to match routes and assign a friendly name.\n\n    breadcrumbService.addFriendlyNameForRoute('/home', 'Home Sweet Home');\n    breadcrumbService.addFriendlyNameForRoute('/home/users', 'All users');\n    breadcrumbService.addFriendlyNameForRouteRegex('/home/users/[0-9]/info', 'Information');\n    \nSpecify a callback function that will supply a name for a specific route or regex. \nThis is intended to be used when a route contains path params. It allows you display a specific name for the given id contained in the route url.\n    \n    breadcrumbService.addCallbackForRoute('/home/users/1', this.getNameForUser);\n    breadcrumbService.addCallbackForRouteRegex('^/home/users/[0-9]$', this.getNameForUser);\n    \n    getNameForUser(id:string):string {\n        return 'specific name for user with id';\n    }\n    \nHide certain routes (paths) from the breadcrumb trail using an exact url or regex.\n    \n    breadcrumbService.hideRoute('/home/secret');\n    breadcrumbService.hideRouteRegex('^/home/secret/[a-zA-Z]');\n\n## Build\n\n    npm install\n    npm build\n\nTo build a standalone bundle:\n\n    npm bundles\n\n## Running\n\n    npm start\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmostert%2Fng2-breadcrumb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmostert%2Fng2-breadcrumb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmostert%2Fng2-breadcrumb/lists"}