Angular Breadcrumb

Installation

``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.

Customization

$3

You can BYO template using the breadcrumb's ng-content transclude.

#### bootstrap breadcrumb:

`html



1. 
   href=""
   *ngIf="breadcrumb.routeData?.navigable"
   [routerLink]="[breadcrumb.url]"
   >{{ breadcrumb.displayName }} >
   >{{ breadcrumb.displayName }} >
   

*ngIf="breadcrumb.terminal"
class="breadcrumb-item active"
aria-current="page"
>
{{ breadcrumb.displayName }}

`html


mat-button
*ngIf="!breadcrumb.terminal"
href=""
[routerLink]="[breadcrumb.url]"
>{{ breadcrumb.displayName }} >
{{ breadcrumb.displayName }}


`

#### 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 { label: crumb.displayName, url: #${crumb.url} };
}
}
`

$3

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);

});
...
}
`

$3

Use BreadcrumbService to subscribe to breadcrumb changes.

`typescript
ngOnInit() {
this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {
this.titleService.setTitle(this.createTitle(crumbs));
});
}
``

License

MIT