Ionic toggle menu doesn't close side menu on android device

Question

I have an Ionic 4 project and I'm using a side menu. There's a menu button that opens the menu, and in the menu is a list of menu-choices, when selected the menu-choice closes the side menu. This works in a browser, but not on a device. The menu will open, but not close.

My side menu is in my app.component.html

Here is a sample of the homepage


    
        
            
          
        
         Opportunity Forms

Here is a screenshot of the app

Works in Chrome Version 77.0.3865.90 Tested and menu does not close on Android 9

Any help is appreciated, hopefully I've provided enough information.

-- Edit (adding app.component.ts) --

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {MenuController} from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private menu: MenuController,
    private route: Router
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  toggleMenu() {
    this.menu.toggle(); //Add this method to your button click function
  }
}

user_3986761 · Answer

Please see this. It discusses the issue: https://github.com/ionic-team/ionic/issues/19354

They suggest updating @ionic/angular to 4.11.2. That did not work for everyone but another proposed solution that worked for someone is:

user_5056173 · Answer

Please give the following code a try:

You have mixed two possible ways. One way is to add ion-menu-toggle in html. Another way is to add a toggle method in app.component.ts and to add a click event in the app.component.html. You have already added the toggle method in die app.component.ts, but you don't have added a click event on the items in the app.component.html..

user_14305096 · Answer

you need to import MenuController and then use that in the button:

the typescript:

...
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
})
export class MenuComponent implements OnInit {
  constructor(
    public menu: MenuController
  ) {}
}

the html:

Ionic toggle menu doesn't close side menu on android device

3 Answers