angular2-breadcrumb v0.0.2
ng2-breadcrumb
This component generates a breadcrumb trail as you navigate to child paths using the @angular/router. Each new route & router-outlet is treated as an endpoint, that shows up as a new level in the breadcrumb trail. Its also possible to create a conceptual parent child hierarchy with just sibling routes, using the '%' char when defining a route path. For example the below Routes uses a single router-outlet, but will be 3 levels deep in the breadcrumb trail:
@Routes([
{ path: '/comp1', component: Component1},
{ path: '/comp1%comp2', component: Component2},
{ path: '/comp1%comp2%comp3', component: Component3}
])
Theres a breadcrumbService that allows you to add friendly names for each of your apps route paths (the friendly name will ultimately show up in the breadcrumb trail):
constructor(private breadcrumbService: BreadcrumbService) {
breadcrumbService.addFriendlyNameForRoute('/comp1', 'Comp 1');
breadcrumbService.addFriendlyNameForRoute('/comp1%comp2', 'Comp 2');
breadcrumbService.addFriendlyNameForRoute('/comp1%comp2%comp3', 'Comp 3');
}
For a live example see: https://embed.plnkr.co/H0C1rL2oEM2Bu4XYJNEO/
Dependencies
Requires bootstrap.css (v 3.x.x) for styling of some elements (although the component is fully functional without it).
Install
Install the module via npm:
npm install ng2-breadcrumb --save
Usage
Import the BreadcrumbService and make it available as a global provider when you bootstrap your app:
import {BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';
bootstrap(App, [
BreadcrumbService
])
Import both the BreadcrumbComponent & BreadcrumbService into your component and update its list of directives:
import {BreadcrumbComponent, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';
@Component({
directives: [BreadcrumbComponent]
})
class Component {
...
}
Inject the BreadcrumbService via the components constructor so you can add friendly names for each of your apps routes:
constructor(private breadcrumbService: BreadcrumbService) {
breadcrumbService.addFriendlyNameForRoute('/home', 'Home Sweet Home');
}
Place the breadcrumb selector in your components html where you added your router-outlet:
<breadcrumb></breadcrumb>
<router-outlet></router-outlet>
Build
To compile the project locally just run the default gulp task (ensure you have gulp install globally to do this):
gulp