ng7-dynamic-breadcrumb

ng7-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 ng7-dynamic-breadcrumb via npm:

npm install --save ng7-dynamic-breadcrumb

Choose the version corresponding to your Angular version:

Angular | ng7-dynamic-breadcrumb ----------- | ------------------- 12 | 6.x+
11 | 5.x+
10 | 4.x+
9 | 3.x
8 | 2.x+
7 | 1.x

2.Import the Ng7DynamicBreadcrumbModule within your app:

import {Ng7DynamicBreadcrumbModule} from "ng7-dynamic-breadcrumb";

@NgModule({
  imports: [
    Ng7DynamicBreadcrumbModule,
  ],
})

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 Ng7MatBreadcrumbService, More info please check the 5th point.
          url: 'page1/:pageOneID/page2/:pageTwoID'
        },
        {
          label: '{{customText}}', // If "customText" is not parameter , should be set value  using Ng7MatBreadcrumbService, More info please check the 5th point.
          url: ''
        }
      ]
    },
  },
];

4.Put the Ng7DynamicBreadcrumbComponent's selector within your template:

<app-ng7-dynamic-breadcrumb></app-ng7-dynamic-breadcrumb>
<router-outlet></router-outlet>

  <!-- breadcrumbConfig: object = {
    bgColor: '#eee',
    fontSize: '18px',
    fontColor: '#0275d8',
    lastLinkColor: '#000',
    symbol: ' / ',
  }; -->
<!-- <app-ng7-dynamic-breadcrumb [bgColor]="'#eee'" [fontSize]="'18px'" [fontColor]="'#0275d8'" [lastLinkColor]="'#000'" [symbol]="' << '"></app-ng7-dynamic-breadcrumb> -->

<!-- <app-ng7-dynamic-breadcrumb [bgColor]="breadcrumbConfig['bgColor']" [fontSize]="breadcrumbConfig['fontSize']" [fontColor]="breadcrumbConfig['fontColor']" [lastLinkColor]="breadcrumbConfig['lastLinkColor']" [symbol]="breadcrumbConfig['symbol']"></app-ng7-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 Ng7DynamicBreadcrumbService

import { Ng7DynamicBreadcrumbService } from 'ng7-dynamic-breadcrumb';
constructor(private ng7DynamicBreadcrumbService: Ng7DynamicBreadcrumbService) { }
ngOnInit() {
  const breadcrumb =  {customText: 'This is Custom Text', dynamicText: 'Level 2 '};
  this.ng7DynamicBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
  }

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) 2021 Thavalam Raja Rama Mohan