projects/rebirth-ng/src/lib/menu-bar/nav-item.component.ts
| selector | re-nav-item |
| styleUrls | nav-item.component.scss |
| templateUrl | ./nav-item.component.html |
Inputs |
direction
|
Type: |
menus
|
Type:
Default value: |
right
|
Type: |
import { Component, Input } from '@angular/core';
import { MenuItem } from './menu-bar.model';
@Component({
selector: 're-nav-item',
styleUrls: ['./nav-item.component.scss'],
templateUrl: './nav-item.component.html',
})
export class NavItemComponent {
@Input() menus: MenuItem[] = [];
@Input() right: boolean;
@Input() direction: 'down' | 'up';
}
<ng-template #defaultMenuTemplate let-menu="menu">
<a *ngIf="menu.router" [routerLink]="menu.router" routerLinkActive="active" [queryParams]="menu.queryParams"
[target]="menu.target || '_self'">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
<a *ngIf="menu.handler" (click)="menu.handler(menu)">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
<a *ngIf="!menu.router && !menu.handler" [href]="menu.url" [target]="menu.target || '_self'">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
</ng-template>
<ul class="nav navbar-nav" [ngClass]="{'navbar-right': right}">
<ng-container *ngFor="let menu of menus">
<li *ngIf="!menu.children?.length" class="{{menu.cssClass}}">
<ng-template *ngIf="menu.itemTemplate" [ngTemplateOutlet]="menu.itemTemplate"
[ngTemplateOutletContext]="{ menu: menu }">
</ng-template>
<ng-container *ngIf="!menu.itemTemplate">
<a *ngIf="menu.router" [routerLink]="menu.router" routerLinkActive="active" [queryParams]="menu.queryParams"
[target]="menu.target || '_self'">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
<a *ngIf="menu.handler" (click)="menu.handler(menu)">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
<a *ngIf="!menu.router && !menu.handler" [href]="menu.url" [target]="menu.target || '_self'">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}</a>
</ng-container>
</li>
<li *ngIf="menu.children?.length" reDropdown [direction]="direction" routerLinkActive="active"
class="dropdown-menu-parent {{menu.cssClass}}">
<a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
<i *ngIf="menu.icon" class="menu-icon {{menu.icon}}"></i> {{menu.text}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu forAnimate">
<ng-container *ngFor="let child of menu?.children">
<ng-template *ngIf="child.itemTemplate" [ngTemplateOutlet]="child.itemTemplate"
[ngTemplateOutletContext]="{ menu: child }">
</ng-template>
<ng-container *ngIf="!child.itemTemplate">
<li *ngIf="!child.divider && !child.header" role="menuitem" class="{{child.cssClass}}">
<a *ngIf="child.router" [routerLink]="child.router" routerLinkActive="active"
[queryParams]="child.queryParams" [target]="child.target || '_self'">
<i *ngIf="child.icon" class="menu-icon {{child.icon}}"></i> {{child.text}}</a>
<a *ngIf="child.handler" (click)="child.handler(child)">
<i *ngIf="child.icon" class="menu-icon {{child.icon}}"></i> {{child.text}}</a>
<a *ngIf="!child.router && !child.handler" [href]="child.url" [target]="child.target || '_self'">
<i *ngIf="child.icon" class="menu-icon {{child.icon}}"></i> {{child.text}}</a>
</li>
</ng-container>
<li *ngIf="child.divider" role="separator" class="divider"></li>
<li *ngIf="child.header" class="dropdown-header">{{child.text}}</li>
</ng-container>
</ul>
</li>
</ng-container>
</ul>