Breadcrumb generator for Angular 5
npm install ng2-breadcrumbsNOTE: This package is still under development. Contributions are appreciated.
ng2-breadcrumbs via npm:
bash
npm install --save ng2-breadcrumbs
`
2.Import the BreadcrumbsModule within your app:
`js
import {BreadcrumbsModule} from "ng2-breadcrumbs";
@NgModule({
imports: [
BreadcrumbsModule,
],
})
`
3.Add a name to your route by adding a breadcrumb property in the route's data:
`js
export const routes: Routes =
[
{
path: 'home',
data: {
breadcrumb: 'Home',
},
component: HomeComponent
}
]
`
4.Put the BreadcrumbsComponent's selector within your template:
`html
`
Adding dynamic routes
In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb route parameter when navigating:
Route:
`js
//Add an extra route parameter that will contain the breadcrumb name
{
path: ':id/:breadcrumb',
component: ProfileBreadcrumbDetails,
}
`
Router code:
`
public name = 'John Doe';
public id = 3;
goToDetails() {
//This will put 'John_Doe' as a route parameter
this._router.navigate([/profiles, this.id, this.name.replace(/ /g,"_")]);
}
`
TODO
1. Add more use cases (using routerLinks, for example).
2. Document BreadcrumbService`.