Hi.
I use the menu component, and I need to dynamically handle the items, either by modifying styles or classes.
Actually allows me to add labels, icons and functionality.
I am looking forward to your response.
Sorry for my bad English
Dynamic items in menu
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Which parts do you need to customize, current MenuItem api has;
https://www.primefaces.org/primeng/#/menumodel
To add any unsupported property, we first need to introduce it in PrimeNG as Ultima menu depends on MenuModel or you can also extend MenuItem API on your own add do changes on app.menu.components.ts especially submenu. Please provide feedback and we'll discuss how to do it.
https://www.primefaces.org/primeng/#/menumodel
To add any unsupported property, we first need to introduce it in PrimeNG as Ultima menu depends on MenuModel or you can also extend MenuItem API on your own add do changes on app.menu.components.ts especially submenu. Please provide feedback and we'll discuss how to do it.
What I specifically need is a menu where I can handle the items dynamically, what i mean is being able to add, remove, hide each item and modify the style.
For example, I have an application that manage phone calls, when I receive a call I want to be able to add it with a style which highlights it over the other menu items.
Also, I want to be able to hide the menu item without having to remove it from the array.
Finally, one last problem I have is with the label attribute in which I use a multi language filter, when the value is change the html does not render it. What i mean is that I would like to be able to use a variable in the label attribute that i send to an item of the menu.
For example, I have an application that manage phone calls, when I receive a call I want to be able to add it with a style which highlights it over the other menu items.
Also, I want to be able to hide the menu item without having to remove it from the array.
Finally, one last problem I have is with the label attribute in which I use a multi language filter, when the value is change the html does not render it. What i mean is that I would like to be able to use a variable in the label attribute that i send to an item of the menu.
Hi,
I will discuss this with my colleagues and get back to you.
Regards
I will discuss this with my colleagues and get back to you.
Regards
-
- Posts: 2
- Joined: 08 Mar 2017, 23:49
+1
We need the same functionality to add/remove a menu item based on logged in user's role/privilege.
We need the same functionality to add/remove a menu item based on logged in user's role/privilege.
As for removing menu items based on role / responsibility after authorizing a user I have a solution that I think will help. I have been using this code for a while and it's probably not the most elegant but it works. Below is my menu.component.ts file. I'd recommend using the visible parameter from the MenuModelAPI.
Code: Select all
@Input() reset: boolean;
model: any[];
scrapVisible: boolean;
soaVisible: boolean;
sftVisible: boolean;
constructor(public app: AppComponent, public auth: AuthService) {}
ngOnInit() {
if (this.auth.authenticated()) {
if (this.auth.userProfile.app_metadata.group === 'scrap'){
this.scrapVisible = true;
this.soaVisible = false;
this.sftVisible = false;
}
if (this.auth.userProfile.app_metadata.group === 'soa'){
this.scrapVisible = true;
this.soaVisible = true;
this.sftVisible = true;
}
}
this.model = [
{label: 'Home', icon: 'home', routerLink: ['/home']},
{
label: 'SOA Team', icon: 'code', visible: this.soaVisible,
items: [
{label: 'Schedule', icon: 'date_range', routerLink: ['/schedule']},
{label: 'Environments', icon: 'assignment', routerLink: ['/environments']},
{
label: 'Documents', icon: 'code', visible: this.soaVisible,
items: [
{label: 'Purchase Order', icon: 'work', routerLink: ['/purchaseorder']},
{label: 'PO Receipt', icon: 'local_shipping', routerLink: ['/poreceipt']},
{label: 'AP Invoice', icon: 'mail', routerLink: ['/apinvoice']}
]
},
]
},
{
label: 'MFT', icon: 'business', visible: this.soaVisible,
items: [
{label: 'MFT Home', icon: 'home', routerLink: ['/mft']}
]
},
{
label: 'SFT', icon: 'business', visible: this.sftVisible,
items: [
{label: 'SFT Home', icon: 'home', routerLink: ['/sfthome']}
]
},
{label: 'All Documents', icon: 'view_list',visible: this.scrapVisible, routerLink: ['/alldocs']},
{label: 'Purchase Orders', icon: 'work', visible: this.scrapVisible, routerLink: ['/purchaseorders']},
{label: 'Shipments', icon: 'local_shipping', visible: this.scrapVisible, routerLink: ['/shipments']},
{label: 'AP Invoices', icon: 'mail',visible: this.scrapVisible, routerLink: ['/apinvoices']},
{label: 'Acknowledgements', icon: 'thumb_up', visible: this.scrapVisible, routerLink: ['/acknowledgements']},
{
label: 'POsandASN', icon: 'account_balance', visible: this.scrapVisible,
items: [
{label: 'PO', routerLink: ['/po']},
{label: 'ASN', routerLink: ['/asn']}
]
},
{
label: 'Mappings', icon: 'map', visible: this.scrapVisible,
items: [
{label: 'Consumers', routerLink: ['/consumers']},
{label: 'Freight Vendors', routerLink: ['/freightvendors']},
{label: 'Items', routerLink: ['/items']},
{label: 'Ship Froms', routerLink: ['/shipfroms']},
{label: 'Ship Tos', routerLink: ['/shiptos']},
{label: 'Suppliers', routerLink: ['/suppliers']}
]
},
{
label: 'Settings', icon: 'settings_application',
items: [
{
label: 'Customization', icon: 'settings_application',
items: [
{label: 'Compact Size', icon: 'fiber_manual_record', command: () => this.app.layoutCompact = true},
{label: 'Material Size', icon: 'fiber_smart_record', command: () => this.app.layoutCompact = false},
{label: 'Light Menu', icon: 'label_outline', command: () => this.app.darkMenu = false},
{label: 'Dark Menu', icon: 'label', command: () => this.app.darkMenu = true},
]
}
This also works:
Code: Select all
private getMenuItem(array: any, label: string): any {
return array.find(item => item.label === label);
}
public showHideMenuItems(roleID: number): void {
const topLevel = this.getMenuItem(this.menuModel, 'Top Level Menu');
if (roleID = 1) {
this.getMenuItem(topLevel.items, 'Menu 1').visible = true;
this.getMenuItem(topLevel.items, 'Menu 2').visible = true;
this.getMenuItem(topLevel.items, 'Menu 3').visible = true;
} else {
this.getMenuItem(topLevel.items, 'Menu 1').visible = false;
this.getMenuItem(topLevel.items, 'Menu 2').visible = false;
this.getMenuItem(topLevel.items, 'Menu 3').visible = false;
}
}
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
visible property or creating a new menu model reference will update the menu actually. Make sure object instance changes otherwise Angular may not detect the change.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 15 guests