Hello,

I am able to open the first tab page (home) from the side menu, but the second tab page (about) is not working.

here's what I'm doing, can you guide me through it?

i have the following tabs:
tabs.html

<ion-tabs [selectedIndex]="mySelectedIndex">
  <ion-tab [root]="tab1Root" tabIcon="home" tabUrlPath="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="information" tabUrlPath="about"></ion-tab>
</ion-tabs>

tabs.ts

tab1Root: any = 'HomePage';
tab2Root: any = 'AboutPage';

the SideMenuOption

// Load simple menu options
  // ------------------------------------------
  this.options.push({
    iconName: 'home',
    displayText: 'Home',
    component: 'TabsPage',
  });

  this.options.push({
    iconName: 'information',
    displayText: 'About Us',
    component: 'TabsPage',
    custom: {
      param: { tabComponent: 'AboutPage' }
    }
  });

Hi, I am using this menu with lazy loading of ionic 3, but the pages take me very long to open, any solution?

The selected item is not being expanded when we use the events to select an item from outside of the side menu.

Is it possible to set a style for the currently active/selected page in the menu

I created a shared component and when I load it to my page i get:
ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded
and when I remove component import from my_page.module.ts everything is normal again....

accordion.ts:

components.module.ts:

my_page.module.ts:

Error:

Hi Seba, it's me again. I have a problem when I want to back to the home page pressing the back button of an a android phone, the problem occurs when I enter in a view and open a modal, then I close the modal but the back button do nothing, the idea when i press the is back button go to the home page, can you help me? Thanks for your time!

Alejandro.

Whats is happening?
Serve
Mobile

Converting it to lazy loading is a nightmare! I have been trying for (almost) a month now without any progress.... Any help is more than welcome.

Hello,
Can you please make an Ionic 4 version of this MultiLevelSideMenu?

Thank you.

Hola Sebastián,
Me gustaría saber como podria agregarle un nuevo atributo a los items del menu, para que sean agregados o no dependiendo de un booleano correspondiente a si el usuario tiene o no permiso para acceder a una page en especifico. Yo ya tengo algo hecho te muestro codigo

{ iconName: 'basket', displayName: 'Mis empresas', component: 'PgBusinessPage', permission: permissions.business.business, },

eso corresponde a un subitem,

Por otro lado he modificado el método set del archivo side-menu-content:

` @input('options')
set options(value: Array) {
console.log("SET OPTIONS SIDE MENU")
console.log(value)
if (value) {
this.menuOptions = value;
console.log(value)
if (!this.menuSettings || this.menuSettings.showSelectedOption) {
this.selectedOption = this.menuOptions.find(option => option.selected);

    this.parents = new Map<string, MenuOptionModel>();

    this.menuOptions.forEach(option => {
      if (option.subItems) {
        option.subItems.forEach(subItem => {
          console.log("tiene permiso:", subItem.displayName, subItem.permission)
          if (subItem.permission) {
            console.log("agrego el item porque tiene permiso")
            console.log(option)
            this.parents.set(subItem.displayName.toLowerCase(), option);
          }else{
            console.log("no agrego porque no tiene permiso")
          }
        });
      }
    });
  }
}

}`

pensando que la linea:

this.parents.set(subItem.displayName.toLowerCase(), option);

me agregaría o no el subitem pero no es así

espero que me puedas ayudar

Quedo atento

Matías Álvarez Sabaté

Hello, very good work.
Is possible to mantain alwais visible the side menu?
Thank you for your great contribution.

how to create a new page and add it in side menu

Hi i new, can anyone tell me, where i have to copy this (side-menu-content) folder, in my pages folder?

Hi,
I just wanted to know how can I restrict the side menu from closing when I navigate to another page...
Basically what I want is if anyone opens side-menu and then navigates to another page and when presses the back button I want the side-menu to be open as it was...
So how can I achieve this??
Thanks!

Hi,
I wanted to use this, but when I added the stuff to my project, the menu toggle button would not be visible in page components. What do I need to make that happen? I already have a button in the toolbar with menuToggle. Please help me.

I did the following expecting text to be yellow but it is still dark green,
i.e. the 'primary' color.

Hello,

First of all thanks a lot for such a nice implementation.

You have explained very nice how to set the selected option when we navigate with a button to an option.

I have a one question. When I refresh the page then gets selected option automatically default page, in this case Home.

For example I have a menu structure: Home - Users - Products.

I chose the Users menu then the URL is http://localhost:8100/#/user-list and Users menu is selected, so far so good.

When I refresh the page (http://localhost:8100/#/user-list) then Home will be automatically selected, not the Users menu.

For sure I can send the event to the menu option on user.list.component.ts but think that I have 20 more components and 20 menus. Then I have to implement in every page. Is there a way in one place to configure selected menu with page refresh?

Hello,
I am trying to include your multilevelsideMenu into my ionic3 apps and it was running nicely. But all of a sudden it just showing me injector error "Property 'injector' does not exist on type 'typeof AppModule'." in custom-decorators/side-menu-display-text-conditions.decorator.ts file

I want 4 level side menu

I tried to push option as mention bellow but it is not working.
also played with side-menu-content.component.html but didn't get what to do,
Can you please guide where else I have to make changes.

Thank you for your great contribution.

this.options.push({ displayName: 'Nayan', subItems: [ { iconName: 'basket', displayName: 'Sub Option 1', subItems: [ { iconName: 'basket', displayName: 'Sub Option 1', component: 'HomePage' }, { iconName: 'bookmark', displayName: 'Sub Option 2', component: 'HomePage' } ] }, { iconName: 'bookmark', displayName: 'Sub Option 2', component: 'HomePage' } ] });

Unable to apply a background image in side menu..., and If I apply then it changes the background of the pages to which I navigate thru it..( I was using scroll-content to set an image on app.scss ) Any solution??

How do I debug this? It opens the page but contents are not loaded.

Hi. First of all thank you for this wonderful plugin and for sharing!!.

I'm trying to create a menu from which I first know the main elements, but one of them is a submenu with elements that come from a web service ...

The fact is that once I have added the structure to the SideMenuOption, I can not find a way to modify or add more elements... even if I load some data in the option array after a timeout (as a test) these do not appear anymore!

The only way I have found is to retain the initialization of the application until the web service has answered, using the angular APP_INITIALIZER token, and then create the menu ... but that causes the screen to go blank for a while. :(

Is there a way to reset or reinitialize the menu once I have the necessary data?

TX.

I don't want to collapse my sub menu on select of sub menus. I am trying ti use this multilevel side menus on split pane .I want to show on my desktop.When i click on sub menu it should be open till we are on that page.

Hi, i'm new to ionic and i want to use your Multilevelsidemenu. but i dont know how to implement it. can someone provide me some links on how to use it?

Thanks for your support all the way..I am trying to set a display name to menu using a variable...I am using ng2-translate ...as per selected language i want to set a display name.I am quiet confused or if i may using it in wrong way..but when i set the variable to display name it show nothing in side menu..please correct me ...its urgent.....thanks in advance
This is my code

this code give me following output

Hi,

I am going to integrate ionic 3 accordion to angular 6. It is possible. plz help me.

I am getting error 'Property 'injector' does not exist on type 'typeof AppModule' in the page side-menu-display-text-conditions.decorator.ts line number 18 and 84.

Is it possible to open an external link for subitem in the device's default browser? For example: http://www.google.com

Anyway to change the menu list for different User role? Example user role A access will get 5 menu item, while for user role B will get 7 menu item.

Hi,

My scenario is

1. Login to application
2. Homapage should display the MultiLevelSideMenu in the Home Page.

I tried

1. copied the shared component folder into my project.

2. copied the app.component.ts to my project.

3. copied the below code into my home.html
   <ion-menu persistent="true" [content]="content" (ionClose)="collapseMenuOptions()">
   
   
   {{ (sideMenuSettings.accordionMode ? 'Accordion' : 'Default') + ' menu' }}
   
   

    <!-- Side Menu -->
    <side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-content>
   

<ion-nav [root]="rootPage" #content swipeBackEnabled="false">

Getting error below
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'side-menu-content'.

1. If 'side-menu-content' is an Angular component and it has 'settings' input, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

    <!-- Side Menu -->
    <side-menu-content [ERROR ->][settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-c"): ng:///HomePageModule/HomePage.html@67:21
   

Can't bind to 'options' since it isn't a known property of 'side-menu-content'.

1. If 'side-menu-content' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

    <!-- Side Menu -->
    <side-menu-content [settings]="sideMenuSettings" [ERROR ->][options]="options" (selectOption)="selectOption($event)"></side-menu-content>
   

"): ng:///HomePageModule/HomePage.html@67:51
'side-menu-content' is not a known element:

1. If 'side-menu-content' is an Angular component, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <!-- Side Menu -->
    [ERROR ->]<side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($ev"): ng:///HomePageModule/HomePage.html@67:2
   

Error: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'side-menu-content'.

1. If 'side-menu-content' is an Angular component and it has 'settings' input, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

    <!-- Side Menu -->
    <side-menu-content [ERROR ->][settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-c"): ng:///HomePageModule/HomePage.html@67:21
   

Can't bind to 'options' since it isn't a known property of 'side-menu-content'.

1. If 'side-menu-content' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

    <!-- Side Menu -->
    <side-menu-content [settings]="sideMenuSettings" [ERROR ->][options]="options" (selectOption)="selectOption($event)"></side-menu-content>
   

"): ng:///HomePageModule/HomePage.html@67:51
'side-menu-content' is not a known element:

1. If 'side-menu-content' is an Angular component, then verify that it is part of this module.

2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <!-- Side Menu -->
    [ERROR ->]<side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($ev"): ng:///HomePageModule/HomePage.html@67:2
   

   at syntaxError (http://localhost:8101/build/vendor.js:80553:34)
   at TemplateParser.parse (http://localhost:8101/build/vendor.js:91791:19)
   at JitCompiler._compileTemplate (http://localhost:8101/build/vendor.js:105985:39)
   at http://localhost:8101/build/vendor.js:105904:62
   at Set.forEach ()
   at JitCompiler._compileComponents (http://localhost:8101/build/vendor.js:105904:19)
   at http://localhost:8101/build/vendor.js:105791:19
   at Object.then (http://localhost:8101/build/vendor.js:80542:143)
   at JitCompiler._compileModuleAndComponents (http://localhost:8101/build/vendor.js:105790:26)
   at JitCompiler.compileModuleAsync (http://localhost:8101/build/vendor.js:105719:37)
   at c (http://localhost:8101/build/polyfills.js:3:19132)
   at Object.reject (http://localhost:8101/build/polyfills.js:3:18554)
   at NavControllerBase._fireError (http://localhost:8101/build/vendor.js:44355:16)
   at NavControllerBase._failed (http://localhost:8101/build/vendor.js:44343:14)
   at http://localhost:8101/build/vendor.js:44398:59
   at t.invoke (http://localhost:8101/build/polyfills.js:3:14356)
   at Object.onInvoke (http://localhost:8101/build/vendor.js:4247:33)
   at t.invoke (http://localhost:8101/build/polyfills.js:3:14296)
   at r.run (http://localhost:8101/build/polyfills.js:3:9523)
   at http://localhost:8101/build/polyfills.js:3:19622
   Ionic Framework: 3.7.1
   Ionic App Scripts: 3.0.0
   Angular Core: 4.4.3
   Angular Compiler CLI: 4.4.3
   Node: 8.1.2
   OS Platform: Windows 7
   Navigator Platform: Win32
   User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64)

Please can you help me how to use the component in my scenario.

Hi guys
I noticed that even though this is supposed to be a standalone component,
it's still bound to some generic app settings( https://github.com/sebaferreras/Ionic3-MultiLevelSideMenu/blob/master/src/app/app.scss )
and I was wondering how to make it more isolated in this terms - my goal is to achieve transparent black background - but I am confused where should this change be done (and how ... to not break current isolation), can you enlighten me?

thank you in advance for any hints
L
(oh and kudos for this code, it's really nice!)

First of all, I want to thank you for this awesome component!

I have a menu structure like this:

• admin
  • config
  • doc
  • log
  • status
• user
  • doc
  • status
• dev
  • doc

As you can see, I'm reusing some of the displayTexts (doc and status). They direct to the same component passing different custom properties. While the page is displayed according to the properties, the menu displays (highlights) always the last occurence of the display name (e.g. dev/doc when selecting admin/doc).

Is there a way to avoid this or does the displayText have to be unique? If the latter is the case, could you unbind the selection from the displayText and add an additional property to the SideMenuOption used for getting the correct selection?

It is better if the side menu sub options stay open when something is selected.
The current selected menu should be highlighted.
Sub Options should be indented.

How to update the elements once they have been initialized?

on click of side menu current menu or item not showing selected and same case with submenu . and another issue with this side menu is it is showing highlighted submenus parent item bydefault. I dont want to show it highlighted bydefault.

Home
Menu2
---submenu1
---submenu2
[---subsubmenu1]
Menu3

How can we do that?

I'd like to suggest changing the CSS as follows so it will not affect other ion-items in the app:

// ------------------------------------ //
// Simple items                         //
// ------------------------------------ //
side-menu-content {
    ion-item.item-ios,
    ion-item.item-md,
    ion-item.item-wp {

        padding-left: 16px;
        padding-right: 16px;
        min-height: 50px;

        &.item.item-block {
            border-bottom: 1px solid $item-color-bg;
        }
        
        & [item-left], 
        & [item-right] {
            margin-left: 0;
        }

        & ion-icon[item-left] + .item-inner, 
        & ion-icon[item-left] + .item-input {
        margin-left: 8px;
        }
    }
}

Fix the side menu on the page only when the button is clicked. How can I do this?

I hard coded it, but this should be available in the scss?

If I touch/click the expand menu I expect it to be blue.

The Interface Provides only iconName, displayName, badge, component, custom, selected, subItems properties.

Is there a way for adding imported icon classes?

How can i remove and add items to menu dinamically? For example, when i Logout, i need to remove "Logout" item. I try to splice the options array but nothing happends. Thanks!
My code:

 selectOption(option: MenuOptionModel): void {
    if (option.custom && option.custom.isLogout) {
      this.logout();
      this.options.splice(4,1);
    } else if (option.component) {
      this.goToPage(option.component);
    }
    this.closeMenu();
  }

How to change the direction of a side menu?
Currently its left to right, but i want side menu from right to left.
Is there any option available for this?

I would like to be able to have a different color for the selected menu background.
Also a secondary color for the actual selected menu would be nice.
If it exists and is documented it must be in my blind spot :(

I'd like to suggest changing displayText from string to BehaviorSubject<string> to support dynamic change of display text and @ngx-translate, the HTML markup will become like, e.g.

<span *ngIf="option.displayText | async as menuText">{{ menuText | translate }}</span>

As you can see the page navigates while the menu is open but the page navigates below the side menu.
How can I achieve opening of the page above the side menu while keeping the side menu open.
referring from previous issue

I have an update running using Angular 6 here:
https://test.adaept.com/
with this repo:
https://github.com/peterennis/test-side-menu-content

However, I cannot seem to update your code as the tsickle WARN does
not allow TypeScript to be updated.

State of my fork is here: https://github.com/peterennis/Ionic3-MultiLevelSideMenu

tsickle relates to Closure, but I have no idea if you are using that or how.

Purpose

Update prep for testing Ionic 4.

I removed ionic-native stuff as it will probably be using Capacitor.

Another repo will be needed for Ionic 4. Are you interested to
move forward on that?

I have some tests running:
https://aetabs.adaept.com
https://aeion4.adaept.com

This one:
https://aeicons.adaept.com/
Is using Ionic 3.9.2 with Angular 6

Even though it's easy to use the displayText to decide which option/suboption should be marked as selected, it'd be better if the component allow users to add an id to each option/suboption and then use that id instead of the displayText.

For example:

public enum SideMenuPage {
    AdminDetails,
    UserDetails
}

// ...

const options: Array<SideMenuOption>  = [
    {
        displayText: 'Admin',
        suboptions: [
            {
                id: SideMenuPage.AdminDetails,
                displayText: 'Details',
                component: 'DetailsPage',
                // ...   
            },
            // ...
        ]
    },
    {
        displayText: 'User',
        suboptions: [
            {
                id: SideMenuPage.UserDetails,
                displayText: 'Details',
                component: 'DetailsPage',
                // ...
            },
            // ...
        ]
    }
]

And then:

@Component({
    selector: 'page-details',
    templateUrl: 'details.html'
})
@SideMenuDisplayTextConditions([
    { propertyName: 'userType', matcher: Matcher.ToEqual, value: UserType.Admin, optionId: SideMenuPage.AdminDetails },
    { propertyName: 'userType', matcher: Matcher.ToEqual, value: UserType.User, optionId: SideMenuPage.UserDetails }
])