npm install angular-crumbs --save
BreadcrumbModule
Import BreadcrumbModule
in the NgModule of your application.
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 {}
app.routes
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'}}
]
}]
}
];
style.css
into your web page<breadcrumb></breadcrumb>
tag in template of your application component.You can BYO template using the breadcrumb's ng-content transclude.
<breadcrumb #parent>
<ol class="breadcrumb">
<ng-template ngFor let-route [ngForOf]="parent.breadcrumbs">
<li *ngIf="!route.terminal" class="breadcrumb-item">
<a href="https://github.com/emilol/angular-crumbs/blob/master/" [routerLink]="[route.url]">{{ route.displayName }}</a>
</li>
<li *ngIf="route.terminal" class="breadcrumb-item active" aria-current="page">{{ route.displayName }}</li>
</ng-template>
</ol>
</breadcrumb>
<breadcrumb #parent>
<span class="breadcrumb" *ngFor="let route of parent.breadcrumbs">
<a mat-button *ngIf="!route.terminal" href="https://github.com/emilol/angular-crumbs/blob/master/" [routerLink]="[route.url]">{{ route.displayName }}</a>
<a mat-button *ngIf="route.terminal">{{ route.displayName }}</a>
</span>
</breadcrumb>
<p-breadcrumb [model]="breadcrumbs"></p-breadcrumb>
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 <MenuItem>{ label: crumb.displayName, url: `#${crumb.url}`}
}
}
Use BreadcrumbService
to set the breadcrumb description dynamically. See full demo example
ngOnInit() {
...
this.github
.getRepoForOrg(this.org, this.repo)
.subscribe(repoDetails => {
...
this.breadcrumbService.changeBreadcrumb(this.route.snapshot, repoDetails.name);
});
...
}
Use BreadcrumbService
to subscribe to breadcrumb changes. See full demo example
ngOnInit() {
this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
this.titleService.setTitle(this.createTitle(crumbs));
});
}