MenuController.toggle() not working on iOS

Ionic Framework ionic-v3
1

I created a component for side menu and add on top of a page. It works well for Android but on iOS, the MenuController methods are not working.

menu.ts

import { Component } from '@angular/core';
@Component({
    selector: 'menu',
    templateUrl: 'menu.html'
})
export class MenuComponent {
    nomeUsuario:string = "Nome do Usuario"
    constructor() {
    }
}

menu.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>Sismogran</ion-title>
            <span id="nomeUsuario">{{nomeUsuario}}</span>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button ion-item>
                <ion-icon name='clipboard'></ion-icon>
                Dashboard
            </button>
            <button ion-item>
                <ion-icon name='analytics'></ion-icon>
                Gráfico detalhado
            </button>
            <button ion-item icon-left>
                <ion-icon name='close'></ion-icon>
                Editar coletores
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav #content></ion-nav>

dashboard.ts

import { Component } from '@angular/core';
import { NavController , ModalController, MenuController} from 'ionic-angular';
import { ServiceProvider } from "../../providers/service-provider";
import { ChartComponent } from "../../components/chart/chart";
import { MenuComponent } from "../../components/menu/menu"
import { AdicionarColetorDashboardPage } from  "../adicionar-coletor-dashboard/adicionar-coletor-dashboard"
@Component({
    selector: 'page-dashboard',
    templateUrl: 'dashboard.html'
})
export class DashboardPage {
    constructor(public navCtrl: NavController, public serviceCtrl: ServiceProvider, public modalCtrl: ModalController, public menuCtrl: MenuController) {
    }
    coletores:Object[] = [];
    teste:string = "Messias";
    ionViewDidLoad() {
        console.log("on did loader");
        this.serviceCtrl.getDashboard().subscribe(data => {
            this.coletores = data.Coletores;
        });
    }
    retirarColetor(coletor:any){
        this.serviceCtrl.retirarColetorDashboard(coletor.Codigo).subscribe(
            data => {
                console.log(data);
                this.ionViewDidLoad();
            }
        );
    }
    mostrarModal(){
        this.modalCtrl.create(AdicionarColetorDashboardPage, {"parent":this} ).present();
    }
    menuToggle(){
        console.log("menuToggle fired");
        this.menuCtrl.toggle();
    }
}

dashboard.html

<menu></menu>
<ion-header>
    <ion-navbar hideBackButton="true">
        <ion-row>
            <button ion-button clear (click)="menuToggle()">
                <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title>Dashboard</ion-title>
        </ion-row>
    </ion-navbar>
</ion-header>

<ion-content >
    <ion-list no-lines>
        <ion-item *ngFor="let coletor of coletores" class="content">
            <ion-card>
                <ion-card-header >
                    {{coletor.Nome}}
                </ion-card-header>
                <ion-card-content>
                    <chart-custom codigo="{{coletor.Codigo}}" dashboard="true" leituraPorData="false" dataInicialSalva="null" dataFinalSalva="null" iniciarPlotagem="true"></chart-custom>
                </ion-card-content>
                <ion-row no-padding>
                    <ion-col>
                        <button ion-button clear small icon-left>
                            <ion-icon name='eye'></ion-icon>
                            Ver mais
                        </button>
                    </ion-col>
                    <ion-col text-center>
                        <button ion-button clear small color="danger" icon-left (click)="retirarColetor(coletor)">
                            <ion-icon name='close'></ion-icon>
                            Remover do dashboard
                        </button>
                    </ion-col>
                </ion-row>

            </ion-card>
        </ion-item>
    </ion-list>

    <ion-fab right bottom (click)="mostrarModal()">
        <button ion-fab color="blue" >
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>

</ion-content>

Edit

I added this on menuToggle() method

menuToggle(){
    if(this.menuCtrl.isOpen()){
        console.log("is open");
    }
    if(this.menuCtrl.isEnabled()){
        console.log("is enabled");
    }

    this.menuCtrl.toggle();
}

And I realized the this.menuCtrl.toggle(); works but the side bar is not showing.

2

I didn’t read all of it, but make sure you’re not doing this in any other component than the root component. I had that problem last week

3

The menu is not in the root component because I don’t want do show the menu in the login page. I don’t know if this is the better way to do that

4

Well I understand, but that’s just the way it is. I had the same problem. Now i’m messing with all these hidden things. You can prevent the menu from being opened though.

5

I added type="overlay" on <ion-menu> tag. Now, the menu on iOS seems like Android but is showing at least.

6

I know there is a solution marked here but it is not a solution but a work around. Even in browser emulating iOS the side menu is not showed.