PP-Breadcrumbs

PP-Breadcrumbs is an Angular 10 library generating breadcrumbs based on the routing state.

Demo: Stackblitz

$3

Install via npm:
``
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 } },
..
];
``

You can see examples for both ways in the demo app.

##### Methods

| Name | Description |
| --- | --- |
| resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | Breadcrumb[] | Resolve function to create custom breadcrumbs for the given routes |
| getFullPath(route: ActivatedRouteSnapshot): string | Returns the full path for the provided route snapshot |