Angular Breadcrumb
Installation
npm install angular8-breadcrumbs --save
BreadcrumbModule
1. Import the Import BreadcrumbModule
in the NgModule of your application.
;;;
app.routes
2. Set breadcumbs in const rootRouterConfig: Routes = path: '' redirectTo: 'home' pathMatch: 'full' path: 'home' ... data: breadcrumb: 'Home' path: 'about' ... data: breadcrumb: 'About' path: 'github' ... data: breadcrumb: 'GitHub' children: path: '' ... path: ':org' ... data: breadcrumb: 'Repo List' children: path: '' ... path: ':repo' ... data: breadcrumb: 'Repo'navigable:true ;
3. Update the markup
- Import the
style.css
into your web page - Add
<breadcrumb></breadcrumb>
tag in template of your application component.
Customization
Template Customization
You can BYO template using the breadcrumb's ng-content transclude.
bootstrap breadcrumb:
{{ breadcrumb.displayName }} {{ breadcrumb.displayName }} {{ breadcrumb.displayName }}
@angular/material breadcrumb
{{ breadcrumb.displayName }} {{ breadcrumb.displayName }}
primeng breadcrumb
Dynamic breadcrumbs
Use BreadcrumbService
to set the breadcrumb description dynamically.
ngOnInit
Dynamic page titles
Use BreadcrumbService
to subscribe to breadcrumb changes.
ngOnInit