Ionic 4 Menu automatically opening when clicking link in other menu

Ionic Framework
1

I have 2 menu’s on a page. And they all work fine, except when I click on a link in my “side-menu” it closes that menu and loads the new page which is what its supposed to do but then it automatically opens my “mainMenu” on page load. Any idea why this menu is automatically opening after a link is clicked in the other menu?

app.component

<ion-app>
  <ion-menu menuId="mainMenu" side="start" contentId="mainMenu" swipe-gesture="false">
    <ion-header>
      <ion-toolbar>
        <ion-title>Pages Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle *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>
  <app-side-menu></app-side-menu>
  <ion-router-outlet id="mainMenu"></ion-router-outlet>
</ion-app>

side-menu.component

<ion-menu side="end" menuId="sideMenu" id="sideMenu" contentId="mainMenu" swipe-gesture="false">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Steps</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>

    <div *ngFor="let p of menu">

      <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.active-parent]="p.open" detail="false">
        <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open">,/</ion-icon>
        <ion-icon slot="start" name="arrow-down" *ngIf="p.open">,/</ion-icon>
        <ion-label>{{ p.title }}</ion-label>
      </ion-item>

      <ion-list *ngIf="p.open">
        <ion-menu-toggle>
          <ion-item class="sub-item"  *ngFor="let sub of p.children" [routerLink]="['/main', gameId, sub.steps_id]" routerDirection="root" [ngClass]="{'active': sub.steps_id==stepId}">
            <ion-label>
              {{ sub.name }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </div>
  </ion-content>
</ion-menu>

and the page header where I display both menus

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="mainMenu"></ion-menu-button>
    </ion-buttons>

    <ion-buttons slot="end">
      <ion-menu-button menu="sideMenu"></ion-menu-button>
    </ion-buttons>

    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
2

Please, add:

  1. menuId=“left-menu” (for example) attribute to the ion-menu tag
  2. menu=“left-menu” (the same as menuId attribute) attribute to the ion-menu-toggle tag
1 Like