Issue
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
<ion-app>
<ion-menu side="start" type="push" contentId="content1">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="light-grey">
<ion-list>
<ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
<ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
Here is a sample of the homepage
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false" menuToggle></ion-menu-button>
</ion-buttons>
<ion-title>
Opportunity Forms
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="ionRefresh($event)" >
<ion-refresher-content
pulling-icon="arrow-dropdown"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-card>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-content>
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
}
}
Solution
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:
<ion-menu-toggle menu="first" autoHide="false">
Answered By - brent
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.