projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts
selector | ab-router-breadcrumb |
styles |
nav { z-index: 11000; pointer: finger; }
nav a { pointer: finger; }
nav li { pointer: finger; }
nav a:hover { text-decoration: none; }
.router-back-button {
display: block;
min-width: 32px;
min-height: 32px;
padding: 10px;
pointer: finger;
}
.router-back-button .icon {
font-size: 180%;
font-weight: bolder;
}
.router-back-button .title {
margin-top: -7.5px;
/*font-size: 220%;*/
/*font-weight: bolder;*/
}
|
template |
|
Properties |
Methods |
Inputs |
constructor(elementRef: ElementRef)
|
||||||
Parameters :
|
backbuttonTitle
|
Default value: |
chevronIcon
|
Default value: |
listClass
|
Type: |
mobileNav
|
Type: |
router
|
Type: |
routes
|
Type: |
separator
|
Default value: |
showHome
|
Default value: |
translateService
|
Type: |
isFront |
isFront()
|
Returns :
boolean
|
navigateHome |
navigateHome()
|
Returns :
void
|
navigateUp |
navigateUp()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
onRouterEvent | ||||
onRouterEvent(event: )
|
||||
Parameters :
Returns :
void
|
setBreadCrumb |
setBreadCrumb()
|
Returns :
void
|
breadcrumbs |
breadcrumbs:
|
Type : []
|
Default value : []
|
currentLevel |
currentLevel:
|
Type : number
|
Default value : 0
|
currentUrl |
currentUrl:
|
Type : string
|
el |
el:
|
Type : HTMLElement
|
Public elementRef |
elementRef:
|
Type : ElementRef
|
import {Component, ElementRef, Input, OnInit} from '@angular/core';
@Component({
selector: 'ab-router-breadcrumb',
template: `
<nav *ngIf="currentUrl !== '/' && breadcrumbs.length > 0">
<!--backbutton-->
<div *ngIf="mobileNav">
<a *ngIf="mobileNav" class="router-back-button"
(click)="navigateUp()"><span class="icon" [ngClass]="chevronIcon" ></span><span *ngIf="backbuttonTitle" class="title">{{ breadcrumbs[breadcrumbs.length-1].data.title }}</span></a>
</div>
<!--breadcrumb menu-->
<ul [ngClass]="listClass" *ngIf="!mobileNav">
<li *ngFor="let item of breadcrumbs"><span>{{separator}}</span><a [routerLink]="[item.path]" routerLinkActive="active" >{{ item.data.title }}</a></li>
</ul>
</nav>
`,
styles: [`
nav { z-index: 11000; pointer: finger; }
nav a { pointer: finger; }
nav li { pointer: finger; }
nav a:hover { text-decoration: none; }
.router-back-button {
display: block;
min-width: 32px;
min-height: 32px;
padding: 10px;
pointer: finger;
}
.router-back-button .icon {
font-size: 180%;
font-weight: bolder;
}
.router-back-button .title {
margin-top: -7.5px;
/*font-size: 220%;*/
/*font-weight: bolder;*/
}
`]
})
export class RouterBreadcrumbComponent implements OnInit {
@Input() router: any;
@Input() routes: any;
@Input() listClass: string;
@Input() mobileNav: boolean;
@Input() chevronIcon = 'glyphicon glyphicon-chevron-left';
@Input() separator = '';
@Input() translateService: any;
@Input() showHome = true;
@Input() backbuttonTitle = false;
currentUrl: string;
currentLevel = 0;
breadcrumbs = [];
el: HTMLElement;
constructor(public elementRef: ElementRef) {
}
ngOnInit() {
this.el = this.elementRef.nativeElement;
this.router.events.subscribe((event) => {
this.onRouterEvent(event);
});
}
onRouterEvent(event) {
// fixme: use only on last event
if (event.urlAfterRedirects && typeof event.urlAfterRedirects === 'string') {
this.currentUrl = event.urlAfterRedirects;
this.currentLevel = this.currentUrl.split('/').length - 1;
this.setBreadCrumb();
}
}
navigateUp() {
let tree = this.currentUrl.split('/');
let lastLevel = '/' + tree[tree.length - 1];
let newUrl = this.currentUrl.slice(0, 0 - lastLevel.length);
console.log('newUrl=', newUrl);
if (newUrl === '') {
this.navigateHome();
} else {
this.router.navigate([newUrl]);
}
}
navigateHome() {
this.router.navigate(['/']);
}
isFront() {
return this.currentUrl === '/';
}
setBreadCrumb() {
if (!this.currentUrl) {
return;
}
this.breadcrumbs = [];
let routerLink = '';
let i = 0;
let tree = this.currentUrl.split('/');
if (this.showHome === true) {
let home = 'home';
if (this.translateService) {
home = this.translateService.instant(home);
}
this.breadcrumbs.push({path: '/', data: {title: home}});
}
tree.forEach((path) => {
if (i < tree.length - 1 && path !== '') {
routerLink += path + '/';
if (i === tree.length - 2) {
routerLink = routerLink.slice(0, -1);
}
if (this.translateService) {
path = this.translateService.instant(path);
}
this.breadcrumbs.push({path: routerLink, data: {title: path}});
}
i++;
});
}
}