I’ve defined a menu in app.html :
<ion-menu persistent="true" id='menu' side="left" type='reveal' [content]="mycontent">
<ion-header>
<ion-toolbar>
<div style="margin-bottom: 0px; margin-top: 0px; padding-top:0px; padding-bottom:0px">
<img src={{avatar}}></div>
<h5 style="margin-bottom: 0px; margin-top: 0px; padding-top:0px; padding-bottom:0px">
{{name}}</h5>
<h6 style="margin-bottom: 0px; margin-top: 0px; padding-top:0px; padding-bottom:0px">
{{username}}</h6>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose="menu" ion-item *ngFor="let e of pages" (click)="openPage(e)">
{{e.title}}
</button>
</ion-list>
</ion-content>
<ion-footer>
<button menuClose="menu" ion-item (click)="openPage(logout)">
<p style="color:white">Log Out</p>
</button>
</ion-footer>
</ion-menu>
and in my home.ts , this is the function that opens the menu :
openMenu(){
this.menuCtrl.enable(true, 'menu');
this.menuCtrl.open('menu');
}
button that calls the function in home.html :
<button ion-button small (click)="openMenu()">
<ion-icon name="menu"></ion-icon>
</button>
I’m able to open and close the menu perfectly fine in these cases :
1)The first time I navigate to home.ts
2)I navigate to a page, which has a button to take me to the home page again ( but with navCtrl.push(HomePage) not navCtrl.pop() )
HomePage --> SomePage --> HomePage
But when I navigate through a couple of pages and then return to home.ts using navCtrl.push(HomePage), my menu button doesn’t work and the menu doesn’t open. The navigation sequence is something like this :
HomePage --> Page1 --> Page 2 --> Page 3 --> Page 4 --> HomePage
I cannot understand why this would happen because none of these pages even interfere with the menu logic I’ve set up. What could be the reason my menu isn’t working in this case?