src/app/Components/Shared/menulist/menulist.component.ts
| selector | app-menulist |
| styleUrls | menulist.component.css |
| templateUrl | ./menulist.component.html |
Properties |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| navItems |
navItems:
|
Type : INavItem[]
|
Default value : [
{
displayName: 'PMS',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'HR Audit Survey',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: '360 Feedback',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'Training Needs Analysis',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'Contact Us',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'About Us',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
}
]
|
import { Component, OnInit } from '@angular/core';
import { INavItem } from '../INavItem';
@Component({
selector: 'app-menulist',
templateUrl: './menulist.component.html',
styleUrls: ['./menulist.component.css']
})
export class MenulistComponent implements OnInit {
constructor() { }
navItems: INavItem[] = [
{
displayName: 'PMS',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'HR Audit Survey',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: '360 Feedback',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'Training Needs Analysis',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'Contact Us',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
},
{
displayName: 'About Us',
iconName: 'close',
children: [
{
displayName: 'EmployeeGroup',
iconName: 'group',
children: [
{
displayName: 'E',
iconName: 'person',
route: 'Off-shore Employee',
children: [
{
displayName: 'CHN Region Employee List',
iconName: 'star_rate',
route: 'material-design'
}
]
},
{
displayName: 'On-site Employee',
iconName: 'person',
route: 'stephen-fluin',
children: [
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
}
]
},
{
displayName: 'Mike Brocchi',
iconName: 'person',
route: 'mike-brocchi',
children: [
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
}
]
},
{
displayName: 'Sessions',
iconName: 'speaker_notes',
children: [
{
displayName: 'Delight your Organization',
iconName: 'star_rate',
route: 'material-design'
},
{
displayName: 'What\'s up with the Web?',
iconName: 'star_rate',
route: 'what-up-web'
},
{
displayName: 'My ally, the CLI',
iconName: 'star_rate',
route: 'my-ally-cli'
},
{
displayName: 'Become an Angular Tailor',
iconName: 'star_rate',
route: 'become-angular-tailer'
}
]
},
{
displayName: 'Feedback',
iconName: 'feedback',
route: 'feedback'
}
]
}
];
ngOnInit() {
}
}
<div class="basic-container">
<span *ngFor="let item of navItems">
<!-- Handle branch node buttons here -->
<span *ngIf="item.children && item.children.length > 0">
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu.childMenu">
{{item.displayName}}
<mat-icon>expand_more</mat-icon>
</button>
<app-menuitem #menu [items]="item.children"></app-menuitem>
</span>
<!-- Leaf node buttons here -->
<span *ngIf="!item.children || item.children.length === 0">
<button mat-button color="primary" [routerLink]="item.route">
{{item.displayName}}
</button>
</span>
</span>
</div>