CODEWITHSUNDEEP
angularionic4
Mile
Mile

Reputation: 11

IONIC 4 ion-menu not showing on ion-menu-button click

I am trying to add a side menu using ion-menu in Angular 6 app, but when I add the button for toggling the menu, and click it, nothing happens. No errors or anything.

// where root ion-app is

<ion-app>  
  <ion-menu side="start" contentId="content" menuId="1">
    <ion-header>
      <ion-toolbar>
        <ion-title>
      Menu
    </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
    <ion-menu-toggle>
      <ion-item>
        <ion-label>Menu item 1</ion-label>
      </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-app>

// and the button in a different file from where we open the menu
  <ion-buttons slot="start">
    <ion-menu-button menu="1" autoHide="false"></ion-menu-button>
  </ion-buttons>

This should be all required to show/hide the menu according to the ionic 4 docs.

Upvotes: 1

Views: 5831

Answers (2)

Camilo Casadiego
Camilo Casadiego

Reputation: 920

no need to recreate or start from scratch your app, I had the same issue just yesterday and after struggling for hours and browsing the docs I managed to get it working as expected, this is my code in case is of any use for you

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu side="start" contentId="main-content" type="overlay">
        <ion-header>
          <ion-toolbar>
            <button ion-button menuToggle icon-only color="dark">
              <ion-icon name='close'></ion-icon>
            </button>
            <ion-title></ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>
              <p class="ion-text-center">
                <ion-thumbnail item-center>
                  <img [src]="userImgProfile" class="menu-picture--profile" style="border-radius: 50%; margin: auto; display: block;">
                </ion-thumbnail>
              </p>
              <p class="ion-text-center">
                {{ usrName }}
              </p>
            </ion-item>
            <ion-menu-toggle auto-hide="false">
              <ion-item (click)="support()">
                <ion-icon slot="start" name="help-buoy"></ion-icon>
                <ion-label>
                  Soporte
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
            <ion-menu-toggle auto-hide="false">
              <ion-item (click)="logout()">
                <ion-icon slot="start" name="power"></ion-icon>
                <ion-label>
                  Cerrar sesion
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>

    </ion-menu>
    <ion-router-outlet id="main-content" main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

and on the inner pages, this is the header I'm using

<ion-header>
  <ion-toolbar hideBackButton="true">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      <span>
        Tus Negocios
      </span>
    </ion-title>
    <ion-buttons slot="end">
      <button ion-button icon-only (click)="support()" color="dark" style="color: #ff4500;">
        <ion-icon name='chatboxes'></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Upvotes: 3

Vamsi Reddy
Vamsi Reddy

Reputation: 11

I suppose you are trying to add a sidemenu manually. If that is true, you need not do that manually. While creating the project, add the type of project you want to create. Use the keywords like blank, sidemenu, tabs. The command goes like this ionic start myApp sidemenu. This will create the project with sidemenu and you need not do it manually.

Hope this helps.

Upvotes: 1

Related Questions