How to show and hide the side menu items dynamically using ionic2

Hi Guys,

Can any one help me on, How to show and hide the side menu items dynamically using ionic2.

Thank you!!!

Best Regards,
Sridhar Etikala

I dont understand what do you mean, could you elaborate?

Hi,

you can add pages to your pages array and remove them.

That’s a possibility, but I think it’s better to just hide and show menu items dynamically. Else you will be creating and removing items from the dom all the time instead of rendering them once and show/hide them dynamically.

@sridharetikala Do you mean show and hide the entire menu dynamically, or items inside it? If it’s the latter, isn’t it a possibility to bind each menu-item to a corresponding value inside a shared service? That way you could toggle the value show/hide specific_item from anywhere within your app.

1 Like

@luukschoen, could you elaborate a bit on:

isn’t it a possibility to bind each menu-item to a corresponding value inside a shared service

Thank you

You could access your menu_items app wide by making use of a service. If I loop over an array of items that should be visible in my side menu, something like this:

<ng-template ngFor let-menu_item [ngForOf]="sharedService.menu_items">
    <my-menu-item *ngIf="menu_item.isVisible">
        {{ menu_item.title }}
    </my-menu-item>
</ng-template>

SharedService should contain an array with menu_items which I can loop over. It’s pretty easy to dynamically show/hide those items. You can now alter the value of each menu_item.isVisible to true/false within your service, from within every component in your app that makes use of the shared service. That’s a clear enough explanation or do you need some more information?

1 Like

thanks for the explanation

In addition to your concern over performance, I think there is a UI case to be made here as well. Users get accustomed to menu items being in specific places, and show/hide keeps them in the same place always, whereas add/remove does not.

Can you share some code I am new don’t know how to make shared service for menu items