## Installation
npm install angular8-breadcrumbs``shell`
npm install angular8-breadcrumbs --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 "angular8-breadcrumbs";
@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',navigable:true}}
]
}]
}
];
#### 3. Update the markup
- Import the style.css into your web page
- Add tag in template of your application component.
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
Use BreadcrumbService to set the breadcrumb description dynamically.
`typescript
ngOnInit() {
...
this.github
.getRepoForOrg(this.org, this.repo)
.subscribe(repoDetails => {
...
this.breadcrumbService.changeBreadcrumb(this.breadcrumb.snapshot, repoDetails.name);
});
...
}
`
Use BreadcrumbService to subscribe to breadcrumb changes.
`typescript``
ngOnInit() {
this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
this.titleService.setTitle(this.createTitle(crumbs));
});
}