File
Implements
Metadata
| selector |
app-menuitem |
| styleUrls |
menuitem.component.css |
| templateUrl |
./menuitem.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(router: Router)
|
|
|
Parameters :
| Name |
Type |
Optional |
| router |
Router
|
no
|
|
|
Public
childMenu
|
childMenu:
|
Decorators : ViewChild
|
|
|
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { INavItem } from '../INavItem';
@Component({
selector: 'app-menuitem',
templateUrl: './menuitem.component.html',
styleUrls: ['./menuitem.component.css']
})
export class MenuitemComponent implements OnInit {
@Input() items: INavItem[];
@ViewChild('childMenu') public childMenu;
constructor(public router: Router) { }
ngOnInit() {
}
}
<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
<span *ngFor="let child of items" >
<span *ngIf="child.children && child.children.length>0">
<button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.displayName}}</span>
</button>
<app-menuitem #menu [items]="child.children"></app-menuitem>
</span>
<span *ngIf="!child.children || child.children.length==0">
<button mat-menu-item color="primary" [routerLink]="child.route">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.displayName}}</span>
</button>
</span>
</span>
</mat-menu>
Legend
Html element with directive