ng2-breadrumbs is a module for Angular 7 that generates a breadcrumb for any page of your application. It is based on the built-in Angular 7 router.
1.Install ng2-breadcrumbs
via npm:
npm install --save ng2-breadcrumbs
2.Import the BreadcrumbsModule
within your app:
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
:
export 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:
<breadcrumb [allowBootstrap]="true"></breadcrumb>
<router-outlet></router-outlet>
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'
}
];
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
const 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 });
}
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: []} ])
}
}
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: []})
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