How to add sub menu in the side menu in Ionic 4?

Ionic Framework
1

I am migrating my ionic 3 app to ionic 4. In Ionic 3 I had a sub menu in a category. This is my old code:

Ionic 3 submenu

Typescript

menuItemForce(): void {
    this.showForce = !this.showForce;
  }

This function will shown the sub items when clicked on a category.

This is the code to show the sub menu:

<ion-list class="sidenav">
            <ion-item (click)="menuItemForce()">
                <ion-icon name="walk" color="primary"></ion-icon>
                Force
            </ion-item>
            <ion-item-group submenu [class.visible]="showForce">
                <ion-item submenu-item menuClose (click)="openWorkPage()">Test1</ion-item>
                <ion-item submenu-item menuClose (click)="openCirckelPage()">Test2</ion-item>
                <ion-item submenu-item menuClose (click)="openDistancePage()">Test3</ion-item>
                <ion-item submenu-item menuClose (click)="openSpeedPage()">Test4</ion-item>
                <ion-item submenu-item menuClose (click)="openKinEnergyPage()">Test5</ion-item>
                <ion-item submenu-item menuClose (click)="openTimePage()">Test6</ion-item>
                <ion-item submenu-item menuClose (click)="openGrafityEnergyPage()">Test7</ion-item>
                <ion-item submenu-item menuClose (click)="openGrafityForcePage()">Test8</ion-item>
            </ion-item-group>
        </ion-list>

When I click the other pages will shown in the menu. This was working good.

This is my code in Ionic 4

Ionic 4 menu

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Categorie</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-app>

Its working good but I don’t know how I can add the sub menu in ionic 4.

How can I have the same functions for the sub menu in Ionic 4?

2

I would also like to know. Facing the same doubts here.

1 Like
3

I think I figure it out:

Use a object array in the appPages

This is my code:

 public appPages = [
    {
      title: 'Card',
      url: '/home',
      icon: 'paper'
    },
    {
      title: 'Category',
      url: '/list',
      icon: 'walk',
      subPages: [{ title: 'subtest1', url: '' },
      { title: 'subtest2', url: '' },
      { title: 'subtest3', url: '' },
      { title: 'subtest4', url: '' },
      { title: 'subtest5', url: '' },
      { title: 'subtest6', url: '' },
      { title: 'subtest7', url: '' },
      { title: 'subtest8', url: '' }]
    }   
  ];

And use this code to load the pages dynamically:

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Categorie</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let s of p.subPages">
              <ion-item [routerDirection]="'root'" [routerLink]="[s.url]">
                <ion-label>
                  {{s.title}}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-app>

I only need a function to show and hide the submenu

2 Likes
4

Got the solution from here

1 Like