ng-dynamic-breadcrumb
v8.0.0
Published
Angular 14 Dynamic Breadcrumb
Downloads
9,900
Maintainers
Keywords
Readme
ng-dynamic-breadcrumb
ng-dynamic-breadcrumb is a module for Angular that generates a breadcrumb for any page of your application. It is based on the built-in Angular router.
Demo Example
Demo Source Example
Usage
Getting started
1.Install ng-dynamic-breadcrumb
via npm:
npm install --save ng-dynamic-breadcrumb
Choose the version corresponding to your Angular version:
Angular | ng-dynamic-breadcrumb
----------- | -------------------
14 | 8.x+
12 | 6.x+
11 | 5.x+
10 | 4.x+
9 | 3.x+
8 | 2.x+
7 | 1.x
2.Import the NgDynamicBreadcrumbModule
within your app:
import {NgDynamicBreadcrumbModule} from "ng-dynamic-breadcrumb";
@NgModule({
imports: [
NgDynamicBreadcrumbModule,
],
})
3.Add a name to your route by adding a breadcrumb
property in the route's data
:
const routes: Routes = [
{
path: 'page1/:pageOneID',
component: PageComponent,
data: {
title: 'page1',
breadcrumb: [
{
label: 'Page1',
url: ''
}
]
},
},
{
path: 'page1/:pageOneID/page2/:pageTwoID',
component: Page2Component,
data: {
title: 'page2',
breadcrumb: [
{
label: 'page {{pageOneID}}',// pageOneID Parameter value will be add
url: '/page1/:pageOneID'
},
{
label: 'page {{pageTwoID}}',// pageTwoID Parameter value will be add
url: ''
}
]
},
},
{
path: 'page1/:pageOneID/page2/:pageTwoID/page3/:pageThreeID',
component: Page3Component,
data: {
title: 'page3',
breadcrumb: [
{
label: 'page1',
url: '/page1/:pageOneID'
},
{
label: '{{dynamicText}} page', // If "dynamicText" is not parameter , should be set value using NgMatBreadcrumbService, More info please check the 5th point.
url: 'page1/:pageOneID/page2/:pageTwoID'
},
{
label: '{{customText}}', // If "customText" is not parameter , should be set value using NgMatBreadcrumbService, More info please check the 5th point.
url: ''
}
]
},
},
];
4.Put the NgDynamicBreadcrumbComponent
's selector within your template:
<app-ng-dynamic-breadcrumb></app-ng-dynamic-breadcrumb>
<router-outlet></router-outlet>
<!-- breadcrumbConfig: object = {
bgColor: '#eee',
fontSize: '18px',
fontColor: '#0275d8',
lastLinkColor: '#000',
symbol: ' / ',
}; -->
<!-- <app-ng-dynamic-breadcrumb [bgColor]="'#eee'" [fontSize]="'18px'" [fontColor]="'#0275d8'" [lastLinkColor]="'#000'" [symbol]="' << '"></app-ng-dynamic-breadcrumb> -->
<!-- <app-ng-dynamic-breadcrumb [bgColor]="breadcrumbConfig['bgColor']" [fontSize]="breadcrumbConfig['fontSize']" [fontColor]="breadcrumbConfig['fontColor']" [lastLinkColor]="breadcrumbConfig['lastLinkColor']" [symbol]="breadcrumbConfig['symbol']"></app-ng-dynamic-breadcrumb> -->
Input parameters
| Input | Required | Details | | ---- | ---- | ---- | | bgColor | Optional | To set background-color for Breadcrumb, default #eee | | fontSize | Optional | To set size of Breadcrumb, default 18px | | fontColor | Optional | To set color of Breadcrumb, default #0275d8 | | lastLinkColor | Optional | To set color of last link Breadcrumb, default #000 | | symbol | Optional | To set symbol of Breadcrumb, default / |
5.Set the value using NgDynamicBreadcrumbService
import { NgDynamicBreadcrumbService } from 'ng-dynamic-breadcrumb';
constructor(private ngDynamicBreadcrumbService: NgDynamicBreadcrumbService) { }
ngOnInit() {
const breadcrumb = {customText: 'This is Custom Text', dynamicText: 'Level 2 '};
this.ngDynamicBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
}
- Update the Breadcrumb using
NgDynamicBreadcrumbService
import { NgDynamicBreadcrumbService } from 'ng-dynamic-breadcrumb';
constructor(private ngDynamicBreadcrumbService: NgDynamicBreadcrumbService) { }
updateBreadcrumb(): void {
const breadcrumbs = [
{
label: 'page {{pageOneID}}',
url: '/page1/:pageOneID'
},
{
label: 'page {{pageTwoID}}',
url: 'page1/:pageOneID/page2/:pageTwoID'
},
{
label: 'page {{pageThreeID}}',
url: 'page1/:pageOneID/page2/:pageTwoID/page3/:pageThreeID'
},
{
label: 'Update Breadcrumb',
url: ''
}
];
this.ngDynamicBreadcrumbService.updateBreadcrumb(breadcrumbs);
}
Questions & Issues
Report bugs/problems by creating an issue creating an issue
Contribute
Pick one of the issues from the issue list to get started.
Developer
Developer: Raja Rama Mohan Thavalam
| Raja Rama Mohan Thavalam | | ----------------- | | |
License
(The MIT License)
Copyright (c) 2022 Thavalam Raja Rama Mohan