File

projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts

Implements

OnInit

Metadata

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
<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>

Index

Properties
Methods
Inputs

Constructor

constructor(elementRef: ElementRef)
Parameters :
Name Type Optional
elementRef ElementRef no

Inputs

backbuttonTitle

Default value: false

chevronIcon

Default value: 'glyphicon glyphicon-chevron-left'

listClass

Type: string

mobileNav

Type: boolean

router

Type: any

routes

Type: any

separator

Default value: ''

showHome

Default value: true

translateService

Type: any

Methods

isFront
isFront()
Returns : boolean
navigateHome
navigateHome()
Returns : void
navigateUp
navigateUp()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onRouterEvent
onRouterEvent(event: )
Parameters :
Name Optional
event no
Returns : void
setBreadCrumb
setBreadCrumb()
Returns : void

Properties

breadcrumbs
breadcrumbs: []
Type : []
Default value : []
currentLevel
currentLevel: number
Type : number
Default value : 0
currentUrl
currentUrl: string
Type : string
el
el: HTMLElement
Type : HTMLElement
Public elementRef
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++;
        });
    }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""