NOTE: This package is still under development. Contributions are appreciated.
ng4-breadcrumbs
ng2-breadrumbs is a module for Angular 4 that generates a breadcrumb for any page of your application. It is based on the built-in Angular 4 router.
Usage
Getting started
1.Install ng2-breadcrumbs
via npm:
npm install --save ng2-breadcrumbs
2.Import the BreadcrumbsModule
within your app:
; @
3.Add a name to your route by adding a breadcrumb
property in the route's data
:
const routes: Routes = path: 'home' data: breadcrumb: 'Home' component: HomeComponent
4.Put the BreadcrumbsComponent
's selector within your template:
Adding dynamic routes
In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb
route parameter when navigating:
Route:
//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
- Add more use cases (using routerLinks, for example).
- Document
BreadcrumbService
. - Add demo.