ngx-neocrumb
v0.1.6
Published
An Angular module for creating breadcrumbs based on Routes.
Downloads
19
Maintainers
Readme
NGX-NeoCrumb
An Angular module for creating breadcrumbs based on Routes.
Installation
$ npm install ngx-neocrumb
The only thing you need to do is import NeoCrumbModule
in your app / shared
module.
import { NeoCrumbModule } from 'ngx-neocrumb';
@NgModule({
imports: [
NeoCrumbModule,
],
})
export class AppModule {}
And then import one of the styles in styles.scss
@import "~ngx-neocrumb/lib/styles/neo-crumb-bs4.css";
@import "~ngx-neocrumb/lib/styles/neo-crumb-mat.css";
@import "~ngx-neocrumb/lib/styles/neo-crumb-min.css";
Usage
Then you can use breadcrumb component in your template wherever you want it.
@Component({
selector: 'app-root',
template: `
<div class="container">
<nc-neo-crumb [inlineBlock]="true"></nc-neo-crumb>
<router-outlet></router-outlet>
</div>`
})
export class AppComponent {}
Configuration
Configuration of the breadcrumbs module is accessable in your route configuration.
const routes: Route[] = {
{
path: '',
component: DashboardComponent,
data: {
breadcrumb: {
text: 'Dashboard',
// Unnecessary fields:
iconClass: 'mdi mdi-view-dashboard',
hide: false
}
}
}
};
Also for changing values at runtime based on app logic, you can use NeoCrumbService to get current items and PostProcess them.
constructor(private neoCrumbService: NeoCrumbService) {
this.neoCrumbService.onChange.subscribe(value => {
value.forEach(nc => {
if (nc.text == 'Dash')
nc.text = 'Dashboard';
});
});
// this.neoCrumbService.postProcess([]);
}