### File

`projects/app-base-library/src/lib/angular/components/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"
                   class="nav-link"
                   [routerLink]="[route.path]"
                   (click)="onClick(route)"
                   routerLinkActive="active">{{ route.data.title }}
                </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

- currentLevel
- currentUrl
- el
- Public elementRef

###### Methods

- ngOnInit
- onClick
- onRouterEvent

###### Inputs

- listClass
- router
- routes
- showHome
- translateService

###### Outputs

- select

### Constructor

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

Parameters :

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

### Inputs

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

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

`routes` | Type: `any[]`
Defined in projects/app-base-library/src/lib/angular/components/router-menu.component.ts:45

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

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

### Outputs

`select` | `$event` type: `EventEmitter`
Defined in projects/app-base-library/src/lib/angular/components/router-menu.component.ts:49

### Methods

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

onClick
`onClick(item: )`
Defined in projects/app-base-library/src/lib/angular/components/router-menu.component.ts:88

Parameters :

Name | Optional
item | no

Returns : `void`

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

Parameters :

Name | Optional
event | no

Returns : `void`

### Properties

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

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

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

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

    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"
                           class="nav-link"
                           [routerLink]="[route.path]"
                           (click)="onClick(route)"
                           routerLinkActive="active">{{ route.data.title }}
                        </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 RouterMenuComponent 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;
            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 ""