Ng7-bootstrap-breadcrumb NPM

ng7-bootstrap-breadcrumb

ng7-bootstrap-breadcrumb is a Angular 14 bootstrap module for Angular that generates a Angular7 bootstrap 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-bootstrap-breadcrumb via npm:

npm install --save ng7-bootstrap-breadcrumb

Choose the version corresponding to your Angular version:

Angular	ng7-bootstrap-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 Ng7BootstrapBreadcrumbModule within your app:

import {Ng7BootstrapBreadcrumbModule} from "ng7-bootstrap-breadcrumb";

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

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-bootstrap-breadcrumb></app-ng7-bootstrap-breadcrumb>
<router-outlet></router-outlet>

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 Ng7BootstrapBreadcrumbService

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

Update the Breadcrumb using Ng7MatBreadcrumbService

import { Ng7BootstrapBreadcrumbService } from 'ng7-bootstrap-breadcrumb';
constructor(private ng7BootstrapBreadcrumbService: Ng7BootstrapBreadcrumbService) { }

  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.ng7BootstrapBreadcrumbService.updateBreadcrumb(breadcrumbs);
  }