Changed to Angular 6

[stefanmahr]

Hello!

I have changed the code to Angular 6

breadcrumbs$ = this.router.events.pipe( filter((event) => event instanceof NavigationEnd), distinctUntilChanged(), map(event => this.buildBreadCrumb(this.activatedRoute.root)) );

but the breadcrumbs are not shown... did anybody have an idea.

[spetsmash]

import { map, filter, distinctUntilChanged} from 'rxjs/operators'; inbreadcrump.component.ts

[spetsmash]

and make breadcrump.component.html

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async"
      class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url]">
      {{ breadcrumb.label }}
    </a>
  </li>
</ol>

[sachin8080]

I got it working this way:

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, distinctUntilChanged } from 'rxjs/operators';

breadcrumbs$: Array<BreadCrumb>;

this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      distinctUntilChanged()
    ).subscribe((event) => {
      this.breadcrumbs$ = this.buildBreadCrumb(this.activatedRoute.root);
});

and in HTML:

<li *ngFor="let breadcrumb of breadcrumbs$; last as isLast;" class="breadcrumb-item" 
      [ngClass]="{'active': isLast}" aria-current="page">
      <a *ngIf="!isLast; else lastRoute" [routerLink]="[breadcrumb.url]" routerLinkActive="active">
        {{ breadcrumb.label }}
      </a>
      <ng-template #lastRoute>{{ breadcrumb.label }}</ng-template>
</li>

[bovandersteene]

Thx for the advice, repo is updated to angular 7