Angular Breadcrumb
Installation
npm install angular-crumbs --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' ;
3. Update the markup
- Import the
style.css
into your web page - Add
<breadcrumb></breadcrumb>
tag in template of your application component.
(live)
DemoCustomization
Template Customization
You can BYO template using the breadcrumb's ng-content transclude.
bootstrap breadcrumb:
{{ route.displayName }} {{ route.displayName }}
@angular/material breadcrumb
{{ route.displayName }} {{ route.displayName }}
primeng breadcrumb
Dynamic breadcrumbs
Use BreadcrumbService
to set the breadcrumb description dynamically. See full demo example
ngOnInit
Dynamic page titles
Use BreadcrumbService
to subscribe to breadcrumb changes. See full demo example
ngOnInit