How to show submenu in sidebar for menu showing in loop in Ionic

Issue

I am working in Ionic App and I want to show the submenu in the sidebar. I am fetching the menus using the *ngFor but the problem is that I am not able to show the submenu.

This is my app.html:

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content class="mymenu22">
     <ion-grid class="formenu11">
      <h1 class="mymenuh11">OTHERS</h1>
     </ion-grid>
     <ion-list>
      <button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
        <ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
      </button>
     </ion-list>
    </ion-content>
</ion-menu>

In this, I am showing the menus in the sidebar and I want to show the submenu for the first menu.

This is my app.component.ts:

pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
  { title1: 'About Us', component: AboutPage, name1: 'people' },
  { title1: 'Gallery', component: GalleryPage, name1: 'images' },
  { title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];

For the Manage Account, I want to show the submenu.

For the Manage Account, I want to show the submenu but I am not getting any code for this.

Any help is much appreciated.

Solution

You can keep submenu pages in another array inside page object populate those to view using *ngFor.

Define your page object with needed attributes.

pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;

Add pages to pages1 array as below inside Page constructor. Do not forget to define rootPage of your app.

    this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
          subPages: [
            { title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
            { title1: 'Contact2', component: Contact2Page, name1: 'contact2'  },
            { title1: 'Contact3', component: Contact3Page, name1: 'contact3'  },
        ]
   },
];

Define a function to open clicked page from side menu.

  openPage(p1) {
    this.rootPage = p1.component;
  }

Define a function to collapse/expand your submenu items inside side menu.

  toggleDetails(p) {
    if (p.showDetails) {
        p.showDetails = false;
        p.icon = 'ios-arrow-down';
    } else {
        p.showDetails = true;
        p.icon = 'ios-arrow-up';

    }
}

Your side menu html should be as below.

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content>
     <ion-grid>
      <h1>OTHERS</h1>
     </ion-grid>
     <ion-list>
      <ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
        <ion-icon name="{{p1.name1}}"></ion-icon>
         <span *ngIf="p1.component === ''">{{p1.title1}}</span>
         <span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
         <ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
        <div *ngIf="p1.showDetails &&p1.subPages != null">
          <ion-list>
            <ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
              <span (click)="openPage(subP)"  menuClose>{{subP.title1}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
     </ion-list>
    </ion-content>
</ion-menu>

I think this will help you. Find StackBlitz Demo Here.

Answered By - Sudarshana Dayananda