A route-based Angular breadcrumb component and service for Angular 13. Allows breadcrumb descriptions to be set based on route data, or as the result of an API call.
npm install @shaap/angular-crumbsshell
npm install angular-crumbs --save
`
#### 1. Import the BreadcrumbModule
Import BreadcrumbModule in the NgModule of your application.
`typescript
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {BreadcrumbModule} from 'angular-crumbs';
@NgModule({
imports: [
BrowserModule,
BreadcrumbModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
`
#### 2. Set breadcumbs in app.routes
`javascript
export 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 tag in template of your application component.
Demo (live)
Customization
$3
You can BYO template using the breadcrumb's ng-content transclude.
#### bootstrap breadcrumb:
`html
`
#### @angular/material breadcrumb
`html
`
#### primeng breadcrumb
`html
`
`typescript
export class AppComponent {
breadcrumbs: MenuItem[];
constructor(private breadcrumbService: BreadcrumbService) { }
ngOnInit() {
this.breadcrumbService.breadcrumbChanged.subscribe(crumbs => {
this.breadcrumbs = crumbs.map(c => this.toPrimeNgMenuItem(c));
});
}
private toPrimeNgMenuItem(crumb: Breadcrumb) {
return #${crumb.url}}
}
}
`
$3
Use BreadcrumbService to set the breadcrumb description dynamically. See full demo example
`typescript
ngOnInit() {
...
this.github
.getRepoForOrg(this.org, this.repo)
.subscribe(repoDetails => {
...
this.breadcrumbService.changeBreadcrumb(this.route.snapshot, repoDetails.name);
});
...
}
`
$3
Use BreadcrumbService to subscribe to breadcrumb changes. See full demo example
`typescript
ngOnInit() {
this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
this.titleService.setTitle(this.createTitle(crumbs));
});
}
``