How to make breadcrumb on Angular 6

Question

I try to make breadcrumb with Angular 6. Texts work but links doesn't work correctly.

I want to do this.

Home > Dashboard > Statistical ( It Works.)

Home -> xxx.com (It works.)

Dashborad -> xxx.com/dashboard (It works.)

Statistical -> xxx.com/statistical (It doesn't work.)

So, if it is subcomponent links don't work.

It needs to be xxx.com/dashboard/statistical (Correct)

How can i do this ?

breadcrumb.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
  route: string;
  breadcrumbList: Array<any>;
  routeLinks: number;
  count: number;

  constructor(location: Location, router: Router) {
    router.events.subscribe((val) => {
      if (location.path() !== '') {
        this.route = location.path();
        this.breadcrumbList = this.route.split('/');
        this.count = this.breadcrumbList.length;
      } else {
        this.route = 'Home';
      }
    });
  }

  ngOnInit() {}
}

breadcrumb.component.html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <ng-container *ngIf="count == null">
      <li class="breadcrumb-item"><i class="material-icons">home</i></li>
    </ng-container>

    <ng-container *ngIf="count != null">
      <li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]=""><i class="material-icons">home</i></a></li>
    </ng-container>

    <ng-container *ngFor="let breadLink of breadcrumbList">
        <li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]="breadcrumbList[2]">{{breadLink}}</a></li>
    </ng-container>
  </ol>
</nav>

I checked no of articles, but I am unable to identify the best and suitable dynamic breadcrumb for the angular2 project. Finally, I have written a pretty easy angular npm module for the dynamic breadcrumb. Please refer the below URL and integrate into your application. https://www.npmjs.com/package/ng-dynamic-breadcrumb — Raja Rama Mohan Thavalam, Mar 10 '19 at 13:57
This might help you. [angular-breadcrumb-demo](https://stackblitz.com/edit/angular-breadcrumb-demo) — hbamithkumara, Dec 04 '19 at 03:14

Uday Vunnam · Answer 1 · 2019-07-04T07:04:26.133

You have to reconstruct every url link with previous url prefixed -

    this.breadcrumbList = this.route.split('/');
    this.breadcrumbLinksList  = [this.breadcrumbList[0]];

    for(let i=1; i<=this.breadcrumbList.length; i++){
      const link = this.breadcrumbLinksList[i-1] +'/'+ this.breadcrumbList[i]
      this.breadcrumbLinksList.push(link)
    }

Use in html as -

<ng-container *ngFor="let breadcrumbLabel of breadcrumbList; let i=index">
    <li class="breadcrumb-item">
      <a [routerLink]="breadcrumbLinksList[i]">{{breadcrumbLabel}}</a>
    </li>
</ng-container>

For more elaborate usage of breadcrumbs, I think xng-breadcrumb (https://github.com/udayvunnam/xng-breadcrumb) covers all your use cases along with few other useful features. Any breadcrumb solution has to handle

declarative approach of defining breadcrumbs in routing Dynamic
asynchronous way to update any route by a different label way to skip
specific routes from displaying in breadcrumbs

Feel free to check usage of breadcrumbs in a production ready Angular App https://xng-breadcrumb.netlify.com

How to make breadcrumb on Angular 6

1 Answers1