Skip to content

Instantly share code, notes, and snippets.

@mcwebdev
Created March 29, 2016 16:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcwebdev/534f31f6c7a2d9c6456e2129c6c742a5 to your computer and use it in GitHub Desktop.
Save mcwebdev/534f31f6c7a2d9c6456e2129c6c742a5 to your computer and use it in GitHub Desktop.
I created an automatic breadcrumb trail for anyone that is interested in wiring up the primeNg breadcrumb
import {Component, Input} from 'angular2/core';
import {FORM_DIRECTIVES, NgClass} from 'angular2/common';
import {ROUTER_DIRECTIVES, RouteConfig, Router, RouteDefinition} from 'angular2/router';
/**
* This component shows a router's paths as breadcrumb trails and allows you to navigate to any of them.
* It subscribes to the router in order to update the breadcrumb trail as you navigate to a component.
* By providing a RouteConfig the component will be able to use the 'as' name to display in the breadcrumbs links.
*/
@Component({
selector: 'breadcrumb',
directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES, NgClass],
template: `
<div>
<ul class="breadcrumb">
<li *ngFor="#url of urls; #last = last" [ngClass]="{'active': last}"> <!-- disable link of last item -->
<a *ngIf="!last" (click)="navigateTo(url)">{{friendlyName(url)}}</a>
<span *ngIf="last">{{friendlyName(url)}}</span>
</li>
</ul>
</div>
`,
styles: [
`
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: transparent;
border-radius: 3px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb > li + li:before {
content: "/";
padding: 0 5px;
color: #999999;
}
.breadcrumb > .active {
color: #555555;
}
`]
})
export class BreadcrumbComponent {
@Input('routeConfig')
routeConfig:RouteDefinition[];
private _urls:String[];
constructor(private router:Router) {
this._urls = new Array();
this.router.subscribe((value) => {
this._urls.length = 0; //Fastest way to clear out array
this.generateBreadcrumbTrail(value);
})
}
generateBreadcrumbTrail(url:String):void {
this._urls.unshift(url); //Add url to beginning of array (since the url is being recursively broken down from full url to its parent paths)
if (url.lastIndexOf('/') > 0) {
this.generateBreadcrumbTrail(url.substr(0, url.lastIndexOf('/'))); //Recursively add parent url
}
}
navigateTo(url:string):void {
this.router.navigateByUrl(url);
}
friendlyName(url:String):String {
if (this.routeConfig && url) {
let route:RouteDefinition;
for (let i = 0; i < this.routeConfig.length; i += 1) {
route = this.routeConfig[i];
if (url == route.path) {
return route.as;
}
}
}
return url;
}
get urls() {
return this._urls;
}
set urls(value) {
this._urls = value;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment