Ionic Menu Questions (Ionic 4)

Ionic Framework
1

Hello guys,

I’ve two Angular components. The first contains a button to show/hide the side navigation.

  1. component:
   <ion-menu-button>buton
      <ion-icon slot="start" name="menu"></ion-icon>
    </ion-menu-button>`

2.component

<ion-split-pane>
    <ion-menu contentId="sideMenu" type="overlay">
        <ion-header>
            <ion-toolbar>
                <ion-title>Side Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <div *ngIf="navigationElement.data">
                    <ion-menu-toggle auto-hide="false" *ngFor="let item of navigationElement.data.sideNavigation">
                        <ion-item>
                            <ion-label>{{item.title}}</ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </div>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="sideMenu" main></ion-router-outlet>
</ion-split-pane>

<ion-split-pane>
        <ion-menu contentId="sideMenu2" type="overlay">
            <ion-header>
                <ion-toolbar>
                    <ion-title>Side Menu</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-list>
                    <div *ngIf="navigationElement.data">
                        <ion-menu-toggle auto-hide="false" *ngFor="let item of navigationElement.data.sideNavigation">
                            <ion-item>
                                <ion-label>{{item.title}} 2</ion-label>
                            </ion-item>
                        </ion-menu-toggle>
                    </div>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet id="sideMenu2" main></ion-router-outlet>
    </ion-split-pane>

How are the ion-menu-button in the first component and the ion-menu in the second component are connected? For testing purposes I added a second side menu in the second component. Now only the second toggles and the first is ignored.

2

What version of ionic are you working in? Ionic 4?

3

yes, I updated the description.

4

In Ionic 4 (at least), you need to set menu="menuName" in the ion-menu-toggle element in your html. See https://beta.ionicframework.com/docs/api/menu-toggle

The menuName must match the menu’s menuId you’ve defined in app.component.ts. Note what the doc says: “if this property is not used, ion-menu-toggle will toggle the first menu that is active.” I’m not sure what that means, but it probably means the first menu defined in that file… who know…

Does this help?

5

I am not sure if I have described the problem well. Therefore I added a screenshot:

image
image.png1374×922 132 KB