Angular 2 Dynamic Breadcrumbs

I hope it's not too late to answer this question :D, so here is a working CodeSandbox example with two breadcrumb implementations, that uses the router data option to pass and collect data for the breadcrumb.

Code explanation:

Look at the comments inside the breadcrumb component.

Here is the breacrumb component

import { Component, OnInit } from "@angular/core";
import {
  Router,
  Event,
  ActivationStart,
  ActivatedRouteSnapshot,
  ActivationEnd,
  NavigationEnd,
  NavigationStart
} from "@angular/router";
import { filter, map, buffer, pluck } from "rxjs/operators";

/**
 * Check if an angular router 'Event' is instance of 'NavigationEnd' event
 */
const isNavigationEnd = (ev: Event) => ev instanceof NavigationEnd;
/**
 * Check if an angular router 'Event' is instance of 'NavigationEnd' event
 */
const isActivationEnd = (ev: Event) => ev instanceof ActivationEnd;

@Component({
  selector: "app-breadcrumb",
  templateUrl: "./breadcrumb.component.html",
  styleUrls: ["./breadcrumb.component.scss"]
})
export class BreadcrumbComponent implements OnInit {
  bcLoadedData;
  bcForDisplay;

  constructor(private router: Router) {}

  ngOnInit() {
    /**
     * navigationEnd$ is trigered once per completed routing event, in other words
     * once per loading a component that is in the end of the current route
     */
    const navigationEnd$ = this.router.events.pipe(filter(isNavigationEnd));

    /**
     * Here we subscribe to all navigation events, in order to update
     * our route "data", which we will use for the breadcrumb visualization.
     *
     * Than we filter the events emitted from the `router` in such way, that we are only
     * taking action upon a completed router event (in other words we are subscribing only for `ActivationEnd`
     * events)
     *
     * We use pluck to get only the requried bredcrumb data
     *
     * The buffer operator accumulates all `data` coming from the router and emmits the accumulated data once
     * when a `NavigationEnd` event passes troufh `navigationEnd$`
     *
     * The `map` in the end is used to reverse the collected data, in order to convert it to more logical
     * sequence. Without the revers first we will get the data for the current route, after that for it's parent
     * and so on (that is how the ng router works).
     */
    this.router.events
      .pipe(
        filter(isActivationEnd),
        pluck("snapshot"),
        pluck("data"),
        buffer(navigationEnd$),
        map((bcData: any[]) => bcData.reverse())
      )
      .subscribe(x => {
        this.bcLoadedData = x;
      });
  }
}

.breadcrumb {
    display: flex;

    &.simple {
        border: 2px solid blueviolet;
        border-radius: 4px;
    }

    .breadcrumb-separator {
        margin: 10px;
    }
}

<div class="breadcrumb simple">
    <div *ngFor="let bcElement of bcLoadedData; let last = last">
        {{bcElement.bc}}
        <span class="breadcrumb-separator"
              *ngIf="!last">></span>
    </div>
</div>

Here is the structure of the routes

const routes: Routes = [
	{ path: '', pathMatch: 'full', component: MockComponentComponent, data: { bc: 'Looking outside' } },
	{
		path: 'home', component: MockComponentComponent,
		data: { bc: 'I see a home' },
		children: [
			{
				path: 'primaryHouse', component: MockComponentComponent,
				data: { bc: 'I\'m going inside the home' },
				children: [
					{
						path: 'kitchen', component: MockComponentComponent,
						data: { bc: 'look inside the kitchen' }
					},
					{
						path: 'bedroom', component: MockComponentComponent,
						data: { bc: 'look inside the bedroom' }
					}
				]
			},
			{
				path: 'guestHouse', component: MockComponentComponent,
				data: { bc: 'I\'m going in the back yard' }
			}
		]
	}
];

Tags:

Router

Breadcrumbs

Angular

Recent Posts