Skip to content

Instantly share code, notes, and snippets.

@tbarisic
Last active July 24, 2019 14:06
Show Gist options
  • Save tbarisic/87fe3a867c359587303d5d0111660508 to your computer and use it in GitHub Desktop.
Save tbarisic/87fe3a867c359587303d5d0111660508 to your computer and use it in GitHub Desktop.
Angular 2 router breadcrumbs example
/*
For each route that you want to appear in breadcrumbs you have to set breadcrumb name in route data as 'breadcrumb' property or in resolve as 'breadcrumb' property.
Import and set breadcrumb component where you want it-->
Route config examples
Route data:
{
path: 'some-path', component: SomeComponent,
data: {
breadcrumb: 'INSERT_BREADCRUMB_NAME'
}
}
Route resolve
{
path: 'some-path', component: SomeComponent,
resolve: {
breadcrumb: NameResolver
}
}
For resolver info see https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
*/
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router, ActivatedRouteSnapshot, UrlSegment} from "@angular/router";
@Component({
selector: 'breadcrumb',
template: `
<div>
<span *ngFor="let breadcrumb of breadcrumbs; let i = index;" >
<a [hidden]="i == (breadcrumbs.length - 1)" [routerLink]="[breadcrumb.url]">{{breadcrumb.name}}</a>
<span [hidden]="i == (breadcrumbs.length - 1)" style="color: #777; padding-left: 5px; padding-right: 5px;">/</span>
<span [hidden]="i != (breadcrumbs.length - 1)" style="color: #777">{{breadcrumb.name}}</span>
</span>
</div>
`
})
export class BreadcrumbComponent implements OnInit {
breadcrumbs: {
name: string;
url: string
}[] = [];
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.router.events.subscribe(event => {
this.breadcrumbs = [];
this.parseRoute(this.router.routerState.snapshot.root);
})
}
parseRoute(node: ActivatedRouteSnapshot) {
if (node.data['breadcrumb']) {
let urlSegments: UrlSegment[] = [];
node.pathFromRoot.forEach(routerState => {
urlSegments = urlSegments.concat(routerState.url);
});
let url = urlSegments.map(urlSegment => {
return urlSegment.path;
}).join('/');
this.breadcrumbs.push({
name: node.data['breadcrumb'],
url: '/' + url
})
}
if (node.firstChild) {
this.parseRoute(node.firstChild);
}
}
}
@Murali-Palada
Copy link

Murali-Palada commented Sep 13, 2017

Its always showing the activated route. I need to show from where the user is navigated from route also, I mean the entire routes of his navigation. Please do the needful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment