ng6-breadcrumbs
ng2-breadrumbs is a module for Angular that generates a breadcrumb for any page of your application. It is based on the built-in Angular router.
Demo
Usage
Getting started
1.Install ng6-breadcrumbs
via npm:
npm install --save ng6-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: '' redirectTo: 'home' pathMatch: 'full' path: 'home' loadChildren: 'app/home/home.module#HomeModule' data: breadcrumb: 'Home' path: 'stores' loadChildren: 'app/stores/stores.module#StoresModule' data: breadcrumb: 'Stores' ;
4.Put the BreadcrumbsComponent
's selector within your template:
- Then your
StoresModule
's routes will look like this:
const STORE_ROUTES: Routes = path: '' component: StoresComponent path: 'books' data: breadcrumb: 'Books' loadChildren: 'app/books/books.module#BooksModule' ;
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 nameconst BOOK_ROUTES: Routes = path: '' component: BooksComponent path: 'book/:id/:breadcrumb' component: BookComponent ;
Router code:
public goToBook(book: Book) {
this.router.navigate(['book' , book.Id, book.Name], { relativeTo: this.route });
}
Adding routes manually
In case the router configuration does not satisfy the way you want to design your breadcrumb structure, you can do it manually through BreadcrumbsService
. You can add your custom breadcrumbs through your route's routable component, for example:
export class MyRoutableComponent {
constructor( private breadcrumbsService:BreadcrumbsService) {
}
ngOnInit() {
this.breadcrumbs.store([{label: 'Home' , url: '/', params: []},{label: 'Careers' , url: '/careers', params: []}, {label: 'MyCustomRouteLabel' , url: '', params: []} ])
}
}
Prefixing routes
Suppose that you already have your breadcrumbs generated, but due to the nesting of the routers, you want to add a breadcrumb from the parent router:
this.breadcrumbs.storePrefixed({label: 'Home' , url: '/', params: []})
Breadcrumb format
The BreadcrumbsService
's store' and
storePrefixed` methods breadcrumb objects. A breadcrumb object should contain:
label
- The text displayed on the breadcrumburl
- The link that it leads toparams
- A collection of route parameters
TODO
- Add more use cases (using routerLinks, for example).