How to implement breadcrumb in Angular 7

Question

I am trying to implement breadcrumbs in Angular 7 based Application.

HTML Template for root component containing breadcrumb component is mentioned below (breadcrumb is outside router outlet)

<app-layout>
 <div>
  <app-breadcrumb></app-breadcrumb>
  <router-outlet></router-outlet>
 </div>
</app-layout>

Breadcrumb component ts file

ngOnInit() {
 this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((router) => {
  let snapshot = this.router.routerState.snapshot;
  this.breadcrumbs = [];
  let url = snapshot.url;
  let routeData: Data = snapshot.root.data;
  let label = routeData['breadcrumb'];
  let params = snapshot.root.params;
  this.breadcrumbs.push({
    url: url,
    label: label,
    params: params
  });
});

Breadcrumb component html file

<nav aria-label='breadcrumb'>
  <ol class='breadcrumb'>
    <li *ngFor='let breadcrumb of breadcrumbs'>
      <a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
    </li>
  </ol>
</nav>

Route definition is as follows

const routes: Routes = [
 { path: 'folders', component: FolderManagementComponent, data: { breadcrumb: 'Home' } },
 { path: 'folders/list-documents', component: ListDocumentsComponent, data: { breadcrumb: 'Documents' } },
 { path: '', redirectTo: '/folders', pathMatch: 'full', data: { breadcrumb: 'Home' }}
];

But I am not getting data and params

I am late here, but did you have a look at xng-breadcrumbs. It provides an easy to use solution for Breacrumbs in Angular. You can check npmjs.com/package/xng-breadcrumb A demo Angular app showcasing breadcrumbs usage in Angular - xng-breadcrumb.netlify.com — Uday Vunnam
– Uday Vunnam, Commented Sep 29, 2019 at 15:17

Raja Ram T · Accepted Answer · 2019-06-14 06:34:22Z

6

Update the router subscribe logic in Breadcrumb component ts file with below code.

  ngOnInit() {

    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(map((route) => {
        while (route.firstChild) { route = route.firstChild; }
        return route;
      }))
      .pipe(filter(route => route.outlet === PRIMARY_OUTLET))
      .subscribe(route => {

        let snapshot = this.router.routerState.snapshot;
        this.breadcrumbs = [];
        let url = snapshot.url;
        let routeData = route.snapshot.data;

        console.log(routeData);
        let label = routeData['breadcrumb'];
        let params = snapshot.root.params;

        this.breadcrumbs.push({
          url: url,
          label: label,
          params: params
        });

      });

}

Working stackblitz Link: https://stackblitz.com/edit/breadcrumb-in-angular-7

Recently I have implemented ng-dynamic-breadcrumb, ng7-dynamic-breadcrumb, ng7-bootstrap-breadcrumb and ng7-mat-breadcrumb Angular breadcrumb Modules. Please check the these modules, I hope this will help for dynamic breadcrumbs.

edited Jun 14, 2019 at 6:34

answered Mar 16, 2019 at 14:32

Raja Ram T

9,2814 gold badges35 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Celso Soares Over a year ago

i checked your modules and they are awesome. But to be honest i prefer the ng7-bootstrap-breadcrumb because the generated html seems to be the more close of what a breadcrumb should be. It generates a <ol> list and also is aria friendly.

Raja Ram T Over a year ago

@CelsoSoares Thank you !. Happy Coding :) (y)

Celso Soares Over a year ago

BTW. On ng7-bootstrap-breadcrumb, is possible to add specific classes to each link? For example, besides label and url params do you have something like classes?

Raja Ram T Over a year ago

@CelsoSoares Currently we haven't provided that kind of feature If possible create a ticket a future reference URL: github.com/rajaramtt/ng7-dynamic-breadcrumb/issues

Mike Over a year ago

@RajaRamaMohanThavalam you should use only one pipe and any side effects should be done in tap not subscribe. pls consult rxjs docs

Collectives™ on Stack Overflow

How to implement breadcrumb in Angular 7

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related