Submenu for sidemenu in ionic 3


#1

How can i implement a submenu for side menu in ionic …?


#2
//app.html----

<ion-menu [content]="content" persistent="true" id="menu1">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div style="height:100%;">
      <div style="height:20%;">
        <ion-thumbnail class='mtitle' item-start style="z-index:999999;margin-top: 5%; height:120px;width:100%;">
          <img src="./assets/imgs/eliteadmin-logo.png" style="height: 100%;width: 100%;">
        </ion-thumbnail>
      </div> 
      <div style="height:80%;margin-top: 10%;background: #1370a7;">

        <ion-list style="background: #1370a7;margin:0;">
          <button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of mainmenus" (click)="openPage(p)">
            {{p.title}}
            <!-- <ion-icon name="ios-arrow-forward" style="color:#fff;font-size: 2rem;" item-right></ion-icon> -->
          </button>
        </ion-list>

        <ion-list style="background: #1370a7;margin:0;">
          <ion-item text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" style="margin: 0;color: #fff;background-color: transparent;padding-right: 0px;">
            <ion-row style="border-top: 1px solid;"> 
              <ion-col col-11 style="line-height: 2;font-size: 16px;">Master</ion-col>
              <ion-col col-1 *ngIf="sublevel" style="line-height: 2.5;"><ion-icon color="success" style="margin-top: 0px;font-size: 2rem;" item-right [name]="isGroupShown(i) ? 'ios-arrow-down-outline' : 'ios-arrow-forward'"></ion-icon></ion-col>
            </ion-row>
            <ion-row *ngIf="isGroupShown(i)">
              <ion-list style="background: #1370a7;width: 100%;">
                <button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of submenus" (click)="openPage(p)">
                  {{p.title}}
                </button>
              </ion-list>
            </ion-row>
          </ion-item>
        </ion-list>        

      </div>
    </div>    
  </ion-content>
</ion-menu>

//app_component.ts--------

variables-
submenus: Array<{title: string, component: any}>;
mainmenus: Array<{title: string, component: any}>;
shownGroup = null;

in constructor - 
this.mainmenus = [ 
     //main menu-list
];
this.submenus = [ 
    //child menu-list
]

How to add submenu in navigation bar?
#3

showing some error

ERROR TypeError: _co.isGroupShown is not a function
at Object.eval [as updateDirectives] (MyApp.html:58)
at Object.debugUpdateDirectives [as updateDirectives]


#4

// add this in app.component.ts

toggleGroup(group) {
    if (this.isGroupShown(group)) {
        this.shownGroup = null;
    } else {
        this.shownGroup = group;
    }
  }
  isGroupShown(group) {
      return this.shownGroup === group;
  }

#5

it works

thanks for your help


#6

if there is two menus and both have sub menus…then how the code would be…?


#7

Hi,
for that situation we have to divide the array in app.component.ts according to our menus.


#8

Thanks for your concern…

but i don’t understand your replay…

what do you mean by splitting array…?


#9

According to given array we have to iterate menus in HTML

this.mainmenus1 = [ 
    { title: 'Menu 1', component: "" },
    { title: 'Menu 2', component: "" }   //this will have sub menu
];
this.submenus1 = [ 
    { title: 'Sub Menu 1', component: "" },
    { title: 'Sub Menu 2', component: "" },
]

this.mainmenus2 = [ 
    { title: 'Menu 3', component: "" },
    { title: 'Menu 4', component: "" },
	{ title: 'Menu 5', component: "" }   //this will have another sub menu
];
this.submenus2 = [ 
    { title: 'Sub Menu 3', component: "" },
    { title: 'Sub Menu 4', component: "" },
]

#10

i have written the code as you said…

but the problem is, if there are two main menus and when i click one main menu both main menus sub menu are opening


#12

Here is the screen shots


#13

Check the array name… both are opening twise because of same array name…


#14

Array names are different… i assure it.

The content are displayed from array…but both menus are expanding while clicking one menu.that is the problem.

I kindly request your Help


#15

I’ll help you tomorrow. Office timing is over. Ping me in the morning.


#16

Thanks for your concern…will ping in the morning


#17

hey…are you there…?


#18

Hiii… I have shared you drive link, from link you can find the app.cpmponent.ts and app.html file. code is l’ll lengthy and confusing…

link - https://drive.google.com/open?id=1P8Ks2Aron7sHwTJMXndqI5-UvVfkNiv_


#19

Finally it works perfectly…thanks for your valuable concern…


#20

welcome…buddyyy…


#21

Can I have a working demo for this solution? I need for my project. How do we define ‘i’ in toggleGroup(i) and isGroupShown(i) in app.html?