Angular 6 Breadcrumb

Usage

1. Install ng6-breadcrumbs via npm:

npm install --save ng6-breadcrumbs

2. Import the BreadcrumbsModule within your app (app.modules.ts) :

import {BreadcrumbsModule} from "ng6-breadcrumbs";
 
@NgModule({
  imports: [
    BreadcrumbsModule,
  ],
})

3. Add a name to your route by adding a breadcrumb property in the route's data(app-routing.module.ts or stores.module.ts):

const APP_ROUTES: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {
        path: 'home',
        loadChildren: 'app/home/home.module#HomeModule',
        data: {
            breadcrumb: 'Home'
        }
    },
    {
        path: 'stores',
        loadChildren: './modules/stores/stores.module#StoresModule',
        data: {
            breadcrumb: 'Stores'
        }
    }
];

or 

const STORE_ROUTES: Routes = [
  {
      path: '',
      component: StoresComponent
  },
  {
      path: 'books',
      data: {
          breadcrumb: 'Books'
      },
      loadChildren: '../books/books.module#BooksModule'
  }

];

4. Put the BreadcrumbsComponent's selector within your template (app.component.html):

<breadcrumb [allowBootstrap]="true"></breadcrumb>
<router-outlet></router-outlet>

5. add style.css to make breadcrumb become '>' style

.fluid-bread {
  padding-left: 30px;
}
  
.fluid-bread {
  ol.breadcrumb {
    display: flex;
  }

  ol li:not(:last-child):after {
    content: '   >   '
  }

  ol li:nth-child(3){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 6.5%;
    padding-left: 4px;
  }

  ol li {
    list-style-type: none;
    color: #979797;

    a:hover {
      color: black;
    }

    a:-webkit-any-link, :link {
      text-decoration: none;
      color: var(--mdc-theme-secondary, #009BDE) !important;
      padding-left: 4px;
    }
  }
}

6. Adding dynamic routes

In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb route parameter when navigating: Route:

//Add an extra route parameter that will contain the breadcrumb name
const BOOK_ROUTES: Routes = [
    {
        path: '',
        component: BooksComponent
    },
    {
        path: 'book/:id/:breadcrumb',
        component: BookComponent
    }
];

Router Code:

public goToBook(book: Book) {
    this.router.navigate(['book' , book.Id, book.Name], { relativeTo: this.route });
}