ng-breadcrumbs

breadcrumb.component.scss

.breadcrumbs {
    list-style-type: none;
    overflow: hidden;
    background-color: #f5f6f7;
    display: inline-block;
    border-radius: 3px;
    padding: 5px;
    margin: 10px 0 10px 40px;

    li {
        color: #bbc1c8;
        list-style-type: none;
        float: left;
        cursor: pointer;
        padding-right: 10px;
        &::before {
            content: "/";
            margin-right: 10px;
        }

        &:first-child::before {
            content: "";
            margin-left: 0;
        }
    }

    .currentRoute {
        color: black;
    }
}

breadcrumb.model.ts

export interface BreadcrumbRoute {
    currentRoute: string | number;
    routes: Array<any>;
}

breadcrumbs.component.html

<ul class="breadcrumbs" *ngIf="data | async; let data">
    <li *ngFor="let link of data.routes; let idx = index" (click)="navToUrl(idx)" class="paragraph regular default">{{ link.name }}</li>
    <li class="paragraph regular default currentRoute">{{ data.currentRoute }}</li>
</ul>

breadcrumbs.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BreadcrumbRoute } from './breadcrumb.model';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'breadcrumbs',
    templateUrl: './breadcrumbs.component.html',
    styleUrls: ['./breadcrumbs.component.scss']
})
export class BreadcrumbsComponent {
    customer: any;
    data: Observable<BreadcrumbRoute>;
    
    /*
    * Array of routes you'd like to have renamed. (originalroute: coolRouteName)
    */
    routeNames = {
        profile: 'profile-page',
        passwords: 'very-cool-passwords-page'
    };

    constructor(private route: ActivatedRoute, private router: Router) {
        const routerSnapshot = this.route.snapshot.params;
        const customer = res['data'];
        const routeArray = this.router.url.toString().split('/');
        const newRouteArray = [];
        routeArray.shift();
        routeArray.forEach(item => {
            if (routerSnapshot['id'] === item) { //Change 'id' to your route parameter
                newRouteArray.push({ name: res[0].name, redirectTo: item });
            } else if (this.routeNames[item]) {
                newRouteArray.push({ name: this.routeNames[item], redirectTo: item });
            } else {
                newRouteArray.push({ name: item, redirectTo: item });
            }
        });
        const currentRoute = newRouteArray.pop()['name'];
        this.data = {
            routes: newRouteArray,
            currentRoute: currentRoute
        };
    }

    navToUrl(idx: number): void {
        this.data.subscribe(data => {
            if (idx === 0) {
                this.router.navigateByUrl(data.routes[0].redirectTo);
            } else {
                const newRouteArray = [];
                const routeArray = data.routes.slice(0, idx + 1);
                routeArray.map(item => newRouteArray.push(item.redirectTo));
                this.router.navigate(newRouteArray);
            }
        });
    }
}