Submenu for sidemenu in ionic 3

Ionic Framework ionic-v3
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
]
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

2 Likes
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

upload1
upload1.png1366×768 175 KB
upload2
upload2.png1366×768 174 KB

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…

1 Like
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?