Angular - Using Params In Breadcrumbs

In my app-routing.module file my routes are like below code. However, I'll get some params in my Rules component and path will be changed as: rules?ruleId=13573957. I want my bread

Solution 1:

Below is the code I use, Hope it helps

Sample on Stackblitz

TS FILe

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, Params, PRIMARY_OUTLET, NavigationStart, NavigationCancel } from '@angular/router';
import { filter, tap } from 'rxjs/operators';
import { Location } from '@angular/common';
import { BehaviorSubject } from 'rxjs';

interface BreadcrumbInterface {
  label: string;
  params: Params;
  url: string;
}

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BreadcrumbComponent implements OnInit {

  public breadcrumbs: BreadcrumbInterface[];
  showSpinnerSubject$ = new BehaviorSubject<boolean>(false);
  showSpinnerAction$ = this.showSpinnerSubject$.asObservable();
  navigationEvent = this.router.events;
  navigationEventEnd = this.navigationEvent.pipe(
    filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel),
    tap(() => this.showSpinnerSubject$.next(false)),
    tap(() => { this.breadcrumbs = this.getBreadcrumbs(this.activatedRoute.root); })
  );
  navigationEventStart = this.navigationEvent.pipe(
    filter(event => event instanceof NavigationStart),
    tap(() => this.showSpinnerSubject$.next(true)),
  )
  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location
  ) {
    this.breadcrumbs = [];
  }

  ngOnInit() {
    // this.breadcrumbs = this.getBreadcrumbs(this.router.routerState.root);
    this.navigationEventStart.subscribe();
    this.navigationEventEnd.subscribe();

  }

  private getBreadcrumbs(
    route: ActivatedRoute, url: string = '',
    breadcrumbs: BreadcrumbInterface[] = []): BreadcrumbInterface[] {
    const ROUTE_DATA_BREADCRUMB = 'breadcrumb';

    const children: ActivatedRoute[] = route.children;

    if (children.length === 0) {
      return breadcrumbs;
    }

    for (const child of children) {
      if (child.outlet !== PRIMARY_OUTLET) {
        continue;
      }

      if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
        return this.getBreadcrumbs(child, url, breadcrumbs);
      }

      const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');

      url += `/${routeURL}`;

      const breadcrumb: BreadcrumbInterface = {
        label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],
        params: child.snapshot.params,
        url
      };
      if (breadcrumb.label) {
        breadcrumbs.push(breadcrumb);
      }
      return this.getBreadcrumbs(child, url, breadcrumbs);
    }
    return [];
  }
  backClicked() {
    this.location.back();
  }

}

In HTML FILE

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark" *ngIf='breadcrumbs.length; else dashboard'>
    <li class="breadcrumb-item">
      <button aria-label="Navigate to previous page" (click)='backClicked()' class='btn btn-sm btn-info'><span
          class='icon-left-big'></span>Back</button>
    </li>
    <li class="breadcrumb-item">
      <a aria-label='Home' routerLinkActive='active' [routerLink]='["/dashboard"]'><span class='icon-home'></span></a>
    </li>
    <ng-template #breadcrumbLi>
      <li *ngFor="let breadcrumb of breadcrumbs.slice(0,breadcrumbs.length-1); let i = index" class="breadcrumb-item">
        <a routerLinkActive='active' [routerLink]='["/dashboard"]'
          *ngIf='breadcrumb.label === "Home"; else nonHomeLink'><span class='icon-home'></span></a>
        <ng-template #nonHomeLink>
          <a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params"> {{ breadcrumb.label }} </a>
        </ng-template>

      </li>
      <li class="breadcrumb-item active" aria-current="page">{{ breadcrumbs[breadcrumbs.length-1].label }}</li>
    </ng-template>

    <li *ngIf='(showSpinnerAction$ | async); else breadcrumbLi'><span class="breadcrumb-item icon-spin3 animate-spin"></span></li>
  </ol>
  <ng-template #dashboard>
    <ol class="breadcrumb bg-dark">
      <li class="breadcrumb-item">
        <button (click)='backClicked()' class='btn btn-sm btn-info'><span class='icon-left-big'></span>Back</button>
      </li>
      <li class="breadcrumb-item active">
        <span class='icon-home'></span>
      </li>
      <li *ngIf='(showSpinnerAction$ | async)'><span class="breadcrumb-item icon-spin3 animate-spin"></span></li>
    </ol>
  </ng-template>
</nav>

In CSS

ol {
  margin: 0;
  font-size: 1em;
  line-height: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  border: 1px solid rgba(173, 216, 230, 0.25);
  margin: 2px;
}
.active {
  color: beige;
}
.breadcrumb-item button {
  padding: 0 5px 0 5px;
  margin-top: -2px;
  margin-bottom: -5px;
  min-width: 70px;
  display: inline-block;
}
.breadcrumb-item a {
 min-width: 25px;
 display: inline-block;
 line-height: 1em;
}
.breadcrumb-controls {
  right: 10px;
  position: absolute;
}
nav {
  position: relative;
}