import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { BreadCrumbResolverService } from '../../../services/breadcrumb/breadcrumb-resolver.service'; import { BreadcrumbItem } from './definition/breadcrumb-item'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-breadcrumb', templateUrl: './breadcrumb.component.html', styleUrls: ['./breadcrumb.component.scss'], encapsulation: ViewEncapsulation.None }) export class BreadcrumbComponent implements OnInit { breadcrumbs$ = this.router.events .filter(event => event instanceof NavigationEnd) .distinctUntilChanged() .flatMap(event => this.buildBreadCrumb(this.activatedRoute.root)); constructor( public activatedRoute: ActivatedRoute, private router: Router, private breadCrumbService: BreadCrumbResolverService ) { } ngOnInit() { } buildBreadCrumb(route: ActivatedRoute): Observable { return this.breadCrumbService.resolve(route).map(x => { x.unshift({ label: 'Dashboard', url: '/welcome' }); return x; }); } navigate(url, params) { this.router.navigate([url, params]); } }