How to toggle Menu in Ionic 4

Question

I am new to Ionic, and I am developing a basic app in Ionic 4 with sidemenu.

I am adding a button in Side Menu, when I am clicking on that button the menu is not toggling. can anyone help me in this ? here's the code which I am trying.

<ion-button color="primary" (click)="function()" class="class" menuToggle expand="block" fill="outline"> text </ion-button>

Explanation of not Duplicate question

Please check the Bold text, I already have a working sidemenu, but the problem is I want to close the sidemenu when I click on ion-button, not on ion-item.

Possible duplicate of [ionic 4 adding side menu](https://stackoverflow.com/questions/53657275/ionic-4-adding-side-menu) — Tomas Vancoillie, Dec 17 '18 at 10:22

NickyTheWrench · Accepted Answer · 2019-05-31T21:21:35.437

41

Simply encapsulate your ion-button within an ion-menu-toggle element, like so:

<ion-menu-toggle>
  <ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>

View the documentation here

EDIT: If you don't want to use ion-menu-toggle, you can do this instead:

In your app.component.ts:

import { MenuController } from '@ionic/angular'; //import MenuController to access toggle() method.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    public menuCtrl: MenuController
  ) {
    this.initializeApp();
  }

toggleMenu() {
    this.menuCtrl.toggle(); //Add this method to your button click function
  }

}

And in your app.component.html:

<ion-button (click)="toggleMenu()">Toggle Menu</ion-button>

To view all methods, check the docs here.

edited May 31 '19 at 21:21

answered Dec 17 '18 at 23:24

NickyTheWrench

3,150
1
23
35

Thanks for the reply, but I tried this also before, there was CSS issues. so planning to toggleMenu from function on click. :) thanks – Riot Zeast Captain Dec 17 '18 at 23:32
1

For every new Ionic project I start I always forget to encapsulate with `ion-menu-toggle`, thank you! – Aaron Jordan May 07 '20 at 23:05

score -1 · Answer 2 · answered Dec 16 '18 at 18:20

in your app.component.html:

<ion-app>
  <ion-split-pane when="sm">
      <ion-menu>
        <ion-header>
          <ion-toolbar color="primary" text-center>
            <ion-title>MyApp</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
              <ion-item [routerDirection]="'root'" href={{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 main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

I want it for button, can you please help me in this ? – Riot Zeast Captain Dec 16 '18 at 18:38 — Riot Zeast Captain, Dec 16 '18 at 18:38

How to toggle Menu in Ionic 4

2 Answers2

Linked