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

- breadcrumbs
- currentLevel
- currentUrl
- el
- Public elementRef

###### Methods

- isFront
- navigateHome
- navigateUp
- ngOnInit
- onRouterEvent
- setBreadCrumb

###### Inputs

- backbuttonTitle
- chevronIcon
- listClass
- mobileNav
- router
- routes
- separator
- showHome
- translateService

### Constructor

`constructor(elementRef: ElementRef)`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:58

Parameters :

Name | Type | Optional
elementRef | `ElementRef` | no

### Inputs

`backbuttonTitle` | Default value: `false`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:54

`chevronIcon` | Default value: `'glyphicon glyphicon-chevron-left'`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:50

`listClass` | Type: `string`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:48

`mobileNav` | Type: `boolean`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:49

`router` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:46

`routes` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:47

`separator` | Default value: `''`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:51

`showHome` | Default value: `true`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:53

`translateService` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:52

### Methods

isFront
`isFront()`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:95
Returns : `boolean`

navigateHome
`navigateHome()`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:91
Returns : `void`

navigateUp
`navigateUp()`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:79
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:63
Returns : `void`

onRouterEvent
`onRouterEvent(event: )`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:70

Parameters :

Name | Optional
event | no

Returns : `void`

setBreadCrumb
`setBreadCrumb()`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:99
Returns : `void`

### Properties

breadcrumbs
`breadcrumbs: `[]``
Type : `[]`
Default value : `[]`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:57

currentLevel
`currentLevel: `number``
Type : `number`
Default value : `0`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:56

currentUrl
`currentUrl: `string``
Type : `string`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:55

el
`el: `HTMLElement``
Type : `HTMLElement`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:58

Public elementRef
`elementRef: `ElementRef``
Type : `ElementRef`
Defined in projects/app-base-library/src/lib/angular/components/router-breadcrumb.component.ts:60

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