PP-Breadcrumbs is an Angular 10 library generating breadcrumbs based on the routing state.
npm install pp-breadcrumbs
npm install pp-breadcrumbs --save
`
Once you installed, you need to import the module:
`
import { PpBreadcrumbsModule } from 'pp-breadcrumbs';
@NgModule({
...
imports: [PpBreadcrumbsModule, ...],
...
})
export class AppModule {
}
`
$3
Use the pp-breadcrumbs component to render the breadcrumbs:
`
@Component({
selector: 'app-root',
template:
})
export class AppComponent {}
`
Rendering with pp-breadcrumbs is optional, and uses Bootstrap 4 CSS classes. If a different markup output is desired, a custom component can be created that subscribes to the PpBreadcrumbsService.crumbs$ observable.
#### Routing Configuration
Breadcrumb links are generated based on the route configuration. If a route entry contains a data.breadcrumbs property the breadcrumbs service assumes breadcrumbs should be created whenever this route or one its child routes are active.
`
const routes: Routes = [
{
path: 'items',
// Uses static text (Items)
data: { breadcrumbs: 'Items' },
children: [
{ path: '', component: ListComponent },
{
path: ':id',
// Interpolates values resolved by the router
data: { breadcrumbs: '{{ item.name }}' },
resolve: { item: ItemResolver },
children: [
{ path: '', component: ItemComponent },
{ path: 'subitem', component: SubitemComponent, data: { breadcrumbs: Subitem } }
]
}
]
},
{
path: 'another-items',
// Uses last urlfragment (another-items) as text
data: { breadcrumbs: true },
children: [
{ path: '', component: ListComponent },
{
path: ':id',
// Resolves the breadcrumbs for this route by extending the PpBreadcrumbsResolver class.
data: { breadcrumbs: AnotherItemResolver },
children: [
{ path: '', component: ItemComponent },
{ path: 'subitem', component: SubitemComponent, data: { breadcrumbs: 'Subitem' } }
]
}
]
},
];
`
$3
#### Breadcrumb
Represents a breadcrumb. HTML content in the text property is allowed.
`
export interface Breadcrumb {
text: string;
path: string;
}
`
#### PpBreadcrumbsComponent
Selector: [pp-breadcrumbs]
Renders the Breadcrumb[] provided by the PpBreadcrumbsService. The HTML output is based on the Bootstrap 4 breadcrumbs.
##### Properties
| Name | Description |
| --- | --- |
| crumbs: Breadcrumb[] | Actually rendered breadcrumbs |
#### PpBreadcrumbsService
##### Properties
| Name | Description |
| --- | --- |
| crumbs$: Observable | Observable stream of Breadcrumb[], which is updated after each route change |
| postProcess: (crumbs: Breadcrumb[]) => Promise | Observable | Breadcrumb[] | Callback function, which allows to modify the fully created breadcrumbs |
#### PpBreadcrumbsResolver
Resolving Breadcrumb[] from the route, PpBreadcrumbsService uses this resolver by default.
There are two ways to resolve breadcrumbs:
- use a resolver, which implements the Resolve (regular resolver), and use like this:
`
const routes: Routes = [
..
{ path: ':id', data: { breadcrumbs: '{{ item.name }}' }, resolve: { item: ItemResolver } },
..
];
`
- use a resolver, which extends from PpBreadcrumbsResolver and return the created breadcrumb. Then use like this:
`
const routes: Routes = [
..
{ path: ':id', data: { breadcrumbs: AnotherItemResolver } },
..
];
``