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';

interfaceBreadcrumbInterface{
  label: string;
  params: Params;
  url: string;
}

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

  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)) {
        returnthis.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);
      }
      returnthis.getBreadcrumbs(child, url, breadcrumbs);
    }
    return [];
  }
  backClicked() {
    this.location.back();
  }

}

In HTML FILE

<navaria-label="breadcrumb"><olclass="breadcrumb bg-dark" *ngIf='breadcrumbs.length; else dashboard'><liclass="breadcrumb-item"><buttonaria-label="Navigate to previous page" (click)='backClicked()'class='btn btn-sm btn-info'><spanclass='icon-left-big'></span>Back</button></li><liclass="breadcrumb-item"><aaria-label='Home'routerLinkActive='active' [routerLink]='["/dashboard"]'><spanclass='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"><arouterLinkActive='active' [routerLink]='["/dashboard"]'
          *ngIf='breadcrumb.label === "Home"; else nonHomeLink'><spanclass='icon-home'></span></a><ng-template #nonHomeLink><a [routerLink]="[breadcrumb.url]" [queryParams]="breadcrumb.params"> {{ breadcrumb.label }} </a></ng-template></li><liclass="breadcrumb-item active"aria-current="page">{{ breadcrumbs[breadcrumbs.length-1].label }}</li></ng-template><li *ngIf='(showSpinnerAction$ | async); else breadcrumbLi'><spanclass="breadcrumb-item icon-spin3 animate-spin"></span></li></ol><ng-template #dashboard><olclass="breadcrumb bg-dark"><liclass="breadcrumb-item"><button (click)='backClicked()'class='btn btn-sm btn-info'><spanclass='icon-left-big'></span>Back</button></li><liclass="breadcrumb-item active"><spanclass='icon-home'></span></li><li *ngIf='(showSpinnerAction$ | async)'><spanclass="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-itembutton {
  padding: 05px05px;
  margin-top: -2px;
  margin-bottom: -5px;
  min-width: 70px;
  display: inline-block;
}
.breadcrumb-itema {
 min-width: 25px;
 display: inline-block;
 line-height: 1em;
}
.breadcrumb-controls {
  right: 10px;
  position: absolute;
}
nav {
  position: relative;
}