menu.component.ts
2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { Component, NgZone, ViewChild, Output, EventEmitter } from '@angular/core';
import { MenuService } from './menu.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-menu',
template: `
<mat-nav-list appAccordion class="navigation">
<mat-list-item appAccordionLink *ngFor="let menuitem of menuService.getAll()" group="{{menuitem.state}}">
<a appAccordionToggle class="relative" [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="javascript:;" *ngIf="menuitem.type === 'sub'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
</a>
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative">{{ childitem.name | translate }}</a>
</mat-list-item>
</mat-nav-list>
</mat-list-item>
</mat-nav-list>`,
providers: [MenuService]
})
export class MenuComponent {
currentLang = 'en';
constructor(
public menuService: MenuService,
public translate: TranslateService) {
}
addMenuItem(): void {
this.menuService.add({
state: 'menu',
name: 'MENU',
type: 'sub',
icon: 'trending_flat',
children: [
{state: 'menu', name: 'MENU'},
{state: 'timeline', name: 'MENU'}
]
});
}
}