AngularBreadcrumbFyp

by Fede-YaoPai

This library was generated with Angular CLI version 12.1.0.

You can find an example application on the GitHub! --->

This library is based on Angular's ActivatedRouteSnapshot; it recursively looks for routes containing the "data" object with a "crumb" property in it. Each route we want to attach a breadcrumb to has to have such object, and the "crumb" property value is going to represent the crumb's title.

You can use this with both eager and lazy loaded routes; please keep reading to quickly understand how to set this up.

Set up

Eager loaded routes

When using Angular's eager loaded routing and creating child routes, we create a main route with a 'children' array. The first item of this array is going to have an empty string as a path and will be the one that actually renders the parent component. These routes - the ones with the empty string as a path - should not be assigned a "crumb" property.

Only the routes containing a path we want to associate a breadcrumb title to should be given the "crumb" property.

Consider the following:

app-routing.module.ts

{
  path: 'home',
  data: { crumb: 'Home' },
  children: [
    {
      path: '',
      component: HomeComponent,
    },
    {
      path: 'child',
      data: { crumb: 'Home Child' },
      children: [
        {
          path: '',
          component: HomeChildComponent,
        },
        {
          path: 'grandchild',
          component: HomeGrandchildComponent,
          data: { crumb: 'Home Grandchild' }
        }
      ]
    }
  ]
}

As you can see, the routes with an empty string as a path, which render the parent component, are not given the "crumb" attribute. Instead, we give that attribute to the parent route, which is the one actually declaring the path we want to hook that specific breadcrumb to.

Lazy loaded routes

For routes that lazily load modules, the same logic applies:

app-routing.module.ts

{
  path: 'about',
  loadChildren: () => import('./features/about/about/about.module').then(m => m.AboutModule),
  data: { crumb: 'About' }
}

As you can see, we give the "crumb" property to the route containing the path (in this case, "about").

This also works for nested routes declared in a lazily loaded module like the one just presented:

about.module.ts

const routes: Routes = [
  {
    path: '',
    component: AboutComponent
  },
  {
    path: 'child',
    data: { crumb: 'About child' },
    children: [
      {
        path: '',
        component: AboutChildComponent
      },
      {
        path: 'grandchild',
        component: AboutGrandchildComponent,
        data: {crumb: 'About grandchild'}
      }
    ]
  }
]

Implementation

Once you have your routes set up, Fede-YaoPai's "angular-breadcrumb-fyp" is going to do all the heavy lifting for you:

• Create a breadcrumb component and inject the library's AngularBreadcrumbFypService into it:

breadcrumb.component.ts

import { AngularBreadcrumbFypService } from 'angular-breadcrumb-fyp';

export class BreadcrumbComponent implements OnInit {

  constructor(public bcs: AngularBreadcrumbFypService) {}

  ngOnInit(): void {
  }

}

• Use the service's "crumbs$" Observable, with the async pipe, to render the breadcrumb segments by Angular's *ngFor directive (the "navigateBreadCrumb()" method is already set up to fetch each breadcrumb's route and navigate to it when the user clicks on one):

breadcrumb.component.html

<div class="breadcrumb-wrapper">
  <ul class="breadcrumb-list">
    <li *ngFor="let crumb of (bcs.crumbs$ | async); let last=last" class="breadcrumb-item" (click)="bcs.navigateBreadCrumb(crumb)">
      <a [ngClass]="{ 'breadcrumb-active' : last }">
        {{ crumb.label }}
      </a>
      <span *ngIf="!last"> > </span>
    </li>
  </ul>
</div>

• Put your component in the app's entry HTML file:

app.component.html

<div class="app-wrapper">
  <div>
    <header>
      <app-header></app-header>
      <app-navbar></app-navbar>
    </header>
    <main>
      <app-breadcrumb></app-breadcrumb>
      <router-outlet></router-outlet>
    </main>
  </div>
  <footer>
    <app-footer></app-footer>
  </footer>
</div>

That's it! The styling is up to you :)

Happy coding!