An Angular 6 module create a breadcrumbs based on RouteModule data.
# install via npm
$ npm --save install @nivans/ngx-breadcrumbs
# or install via yarn
$ yarn add @nivans/ngx-breadcrumbs
To use this module you have to add it to the imports
section in your app.module.ts
. It should be lower than RouterModule
import.
import { RouterModule } from '@angular/router';
import { McBreadcrumbsModule } from 'ngx-breadcrumbs';
@NgModule({
imports: [
RouterModule.forRoot(routes),
NgxBreadcrumbsModule.forRoot()
],
})
export class AppModule {}
Now you have to set it on the place in your global template. Usually, the best place is in AppComponent
template.
@Component({
selector: 'app-root',
template: `
<div class="container">
<nvs-ngx-breadcrumbs></nvs-ngx-breadcrumbs>
<router-outlet></router-outlet>
</div>`
})
export class AppComponent {}
Configuration of the breadcrumbs module is accessable in your route configuration.
const routes: Route[] = {
{
path: '',
component: HomeComponent,
data: {
breadcrumb: 'Home',
isHome: true,
icon: 'fa fa-home',
show: false
}
}
};