Hi There, I have added two menu in my app with different id and using MenuControl’s enable(), I am trying to display one menu out of two at a time. I have checked Conference App, and following similar steps. But still, I am seeing menu 1 always even it is disabled.
My code snippets are below:
app.html
<ion-menu [content]=“content” id=“loggedOutMenu” side=‘left’>
Menu: LoggedOut
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
<ion-menu [content]=“content” id=“loggedInMenu” side=“left”>
Menu: LoggedIn
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
home.html:
Home
Ionic Menu Starter
If you get lost, the docs will show you the way.
Toggle Menu
app.compnents.ts:
import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { HomePage } from ‘…/pages/home/home’;
import { ListPage } from ‘…/pages/list/list’;
import { MenuController } from ‘ionic-angular’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
private menu: MenuController) {
this.initializeApp();
this.menu.enable(false, ‘loggedOutMenu’);
** this.menu.enable(true, ‘loggedInMenu’);**
// used for an example of ngFor and navigation
this.pages = [
{ title: ‘Home’, component: HomePage },
{ title: ‘List’, component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}