Angular component and service for breadcrubms
npm install ng8-breadcrumbsSo given a navigation request to a url '/comp1/comp2/comp3', a breadcrumb trail with 3 levels will be generated. Each level includes all the elements from the previous
level along with the next child. Thus the above url request will result in the following 3 levels being generated: '/comp1', '/comp1/comp2', '/comp1/comp2/comp3'.
Theres a breadcrumbService that allows you to add names for each of your app's available routes. This friendly name will show up in the breadcrumb trail
for each matching level, otherwise it will show the last url fragment.
npm install ng8-breadcrumbs --save
import {NgxBreadcrumbsModule} from 'ng8-breadcrumbs';
@NgModule({
imports: [NgxBreadcrumbsModule]
})
export class AppModule {
...
}
Alternatively you can import the this module into your module and manually provide its service
import {NgxBreadcrumbsModule, NgxBreadcrumbsService} from 'ng8-breadcrumbs';
@NgModule({
imports: [NgxBreadcrumbsModule],
providers: [NgxBreadcrumbsService]
})
export class AppModule {
...
}
Inject the BreadcrumbService into your component to map your routes
export class AppComponent {
constructor(private breadcrumbService: NgxBreadcrumbsService) {
}
}
Place the breadcrumb selector in your component's html where you added your router-outlet:
useBootstrap: boolean to apply the bootstrap breadcrumb style. Defaulted to true.
prefix: string to have a static prefix as the first breadcrumb which routes to the base root when clicked.
this.breadcrumbsService.store(
[
{ label: 'user', url: ../../user, params: [] },
{ label: settings,url: ../settings, params: { tab: 'global' } },
]);
npm install
npm build
To build a standalone bundle:
npm bundles
npm start