File

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

Implements

OnInit

Metadata

selector ab-router-menu
styles nav { z-index: 11000; } a { pointer: finger; }
template
    <nav *ngIf="routes.length > 0">
    <ul [ngClass]="listClass">

        <li *ngFor="let route of routes" class="nav-item">
            <!--<span *ngIf="route.data._permissions.except !== ''">-->
                <!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
                    <!--[routerLink]="[route.path]"-->
                    <!--routerLinkActive="active">{{ route.data.title }}-->
                <!--</a>-->
            <!--</span>-->
            <!--<a *ngxPermissionsOnly="route.data._permissions.only"-->
            <a
               class="nav-link"
               [routerLink]="[route.path]"
               (click)="onClick(route)"
               routerLinkActive="active">{{ route.data.title || route.path }}
            </a>
            <!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
               <!--[routerLink]="[route.path]"-->
               <!--routerLinkActive="active">{{ route.data.title }}-->
            <!--</a>-->
        </li>
        <!--<ng-template ngFor="let route of routes">-->
            <!--<li><a>TEST</a></li>-->
            <!--<ng-template ngxPermissionsOnly="route.data._permissions.only"  ngxPermissionsExcept="route.data._permissions.except">-->
                <!--<div>ngxPermissionsOnly ['DEVELOPER','OWNER'] </div>-->
            <!--</ng-template>-->
        <!--</ng-template>-->

    </ul>
</nav>

Index

Properties
Methods
Inputs
Outputs

Constructor

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

Inputs

listClass

Type: string

router

Type: any

routes

Type: any[]

showHome

Default value: true

translateService

Type: any

Outputs

select $event type: EventEmitter

Methods

ngOnInit
ngOnInit()
Returns : void
onClick
onClick(item: )
Parameters :
Name Optional
item no
Returns : void
onRouterEvent
onRouterEvent(event: )
Parameters :
Name Optional
event no
Returns : void

Properties

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, Output, OnInit, EventEmitter} from '@angular/core';
// import {NgxPermissionsService,NgxRolesService} from 'ngx-permissions';

@Component({
    selector: 'ab-router-menu',
    template: `    
        <nav *ngIf="routes.length > 0">
            <ul [ngClass]="listClass">

                <li *ngFor="let route of routes" class="nav-item">
                    <!--<span *ngIf="route.data._permissions.except !== ''">-->
                        <!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
                            <!--[routerLink]="[route.path]"-->
                            <!--routerLinkActive="active">{{ route.data.title }}-->
                        <!--</a>-->
                    <!--</span>-->
                    <!--<a *ngxPermissionsOnly="route.data._permissions.only"-->
                    <a
                       class="nav-link"
                       [routerLink]="[route.path]"
                       (click)="onClick(route)"
                       routerLinkActive="active">{{ route.data.title || route.path }}
                    </a>
                    <!--<a *ngxPermissionsExcept="route.data._permissions.except"-->
                       <!--[routerLink]="[route.path]"-->
                       <!--routerLinkActive="active">{{ route.data.title }}-->
                    <!--</a>-->
                </li>
                <!--<ng-template ngFor="let route of routes">-->
                    <!--<li><a>TEST</a></li>-->
                    <!--<ng-template ngxPermissionsOnly="route.data._permissions.only"  ngxPermissionsExcept="route.data._permissions.except">-->
                        <!--<div>ngxPermissionsOnly ['DEVELOPER','OWNER'] </div>-->
                    <!--</ng-template>-->
                <!--</ng-template>-->

            </ul>
        </nav>
    `,
    styles: [`
        nav { z-index: 11000; }
        a { pointer: finger; }
    `]
})
export class AbRouterMenuComponent implements OnInit {
    @Input() router: any;
    @Input() routes: any[];
    @Input() listClass: string;
    @Input() translateService: any;
    @Input() showHome = true;
    @Output() select = new EventEmitter();
    el: HTMLElement;
    currentUrl: string;
    currentLevel = 0;

    constructor(public elementRef: ElementRef) { }

    ngOnInit() {
        this.el = this.elementRef.nativeElement;
        if (!this.router) {
            console.log('error: router @Input is not defined');
        }
        this.router.events.subscribe((event) => {
            this.onRouterEvent(event);
        });
        this.routes.forEach((route) => {
            let permissions = {
                only: '',
                except: '',
                // redirectTo: ''
            };
            if(!route.data){
                route.data = {}
            }
            if(route.data.permissions){
                Object.keys(route.data.permissions).forEach((k, i) => {
                    permissions[k] = route.data.permissions[k];
                });
            }
            route.data._permissions = permissions;
        });

    }

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

    onClick(item) {
        this.select.emit(item);
    }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""