1. Home
  2. Forum
  3. Angular - EJ 2
  4. Hiding the sub menu items in menu bar

Hiding the sub menu items in menu bar

Hi Team, 
i have a requirement of hiding the sub menu items of a menu bar upon certain condition.
this.menubar.showItems([]); hides the menu items but how do i hide the sub menu items inside a menu.


Thanks ,
Aditya

6 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team October 9, 2020 01:40 PM UTC

Hi Aditya, 
 
We have checked your reported query, we can achieve your requirement using beforeOpen event. Please refer below code snippets. 
 
 
<ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu> 
 
private beforeOpen(args: BeforeOpenCloseMenuEventArgs): void { 
        //Handling sub menu items 
         for (let i: number = 0; i < args.items.length; i++) { 
            if (this.hiddenItems.indexOf(args.items[i].text) > -1) { 
                this.menuObj.hideItems([args.items[i].text], false); 
            } 
        } 
    } 
 
    private created(): void { 
       this.menuObj.hideItems(['Edit'], false); 
    } 
 
 
For your reference, we have prepared a sample based on this, please refer below link. 
 
 
For more information, please refer below UG Documentation Link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


Marked as answer
AM Aditya Murthy replied to Mohan Kumar Ramasamy October 17, 2020 05:32 PM UTC

Hi Aditya, 
 
We have checked your reported query, we can achieve your requirement using beforeOpen event. Please refer below code snippets. 
 
 
<ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu> 
 
private beforeOpen(args: BeforeOpenCloseMenuEventArgs): void { 
        //Handling sub menu items 
         for (let i: number = 0; i < args.items.length; i++) { 
            if (this.hiddenItems.indexOf(args.items[i].text) > -1) { 
                this.menuObj.hideItems([args.items[i].text], false); 
            } 
        } 
    } 
 
    private created(): void { 
       this.menuObj.hideItems(['Edit'], false); 
    } 
 
 
For your reference, we have prepared a sample based on this, please refer below link. 
 
 
For more information, please refer below UG Documentation Link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


Hi Team,
The solution provided worked 
Thanks for the quick response

Regards,
Aditya

MK Mohan Kumar Ramasamy Syncfusion Team October 20, 2020 01:39 AM UTC

Hi Aditya,   
  
Thanks for the update.  
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohankumar R 


MM Michael Mairegger June 16, 2023 01:32 PM UTC

Hi,

I have issues with the exact same sample using version 21.2.10 and angular 15. There submenu items will not disable nor hide. Can you coform this or is this just an issue on my side?

Regards,
Michael


KV Keerthikaran Venkatachalam Syncfusion Team July 4, 2023 06:54 AM UTC

Hi Michael,


We have confirmed the issue as “The hideItems method not working properly in angular menu component" and logged a defect report. We will include the fix for this issue in upcoming weekly patch release scheduled for 19thof July 2023.


Feedback link: https://www.syncfusion.com/feedback/44966/the-hideitems-method-not-working-properly-in-angular-menu-component


You will be informed regarding this once the fix is published.


Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”


For now, to resolve this kindly set id for menu component. Refer to the below code snippet and sample.


<ejs-menu #menu id="menu" [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu>


Sample Link - https://stackblitz.com/edit/angular-cmxmy4-5kekqy?file=src%2Fapp.component.html


Regards,

KeerthiKaran K V


YA YuvanShankar Arunagiri Syncfusion Team July 19, 2023 12:32 PM UTC

Michael,


We are glad to announce our weekly patch release (22.1.39) is rolled out. We have included the fix for this “The hideItems method not working properly in angular menu component” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end (22.1.39).


Feedback link: https://www.syncfusion.com/feedback/44966/the-hideitems-method-not-working-properly-in-angular-menu-component

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/22.1.39/?type=all#menu

Sample link: https://stackblitz.com/edit/angular-qsyszy-f5bxeu?file=src%2Fapp.component.html

Package link: https://www.npmjs.com/package/@syncfusion/ej2-angular-navigations


Loader.
Up arrow icon