Hi everyone
TLDR: How to dynamically enable menus when using tabs just like in the conference app? Enable menu doesn’t seem to work.
I want to use two menus of which only one is active at the same time. I oriented myself at the ionic conference app. Only difference is, I created a new page menu, instead of writing it in the app.html etc. The reason for this is, that I first followed the tutorial by @saimon on YouTube (https://www.youtube.com/watch?v=PDTV2YKJ0r0).
So let me give you my code:
tabs.html:
<ion-tabs [selectedIndex]="myIndex" tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="{{constants.PAGE_TITLE_HOME}}" tabIcon="{{constants.PAGE_ICON_HOME}}" [show]="!storageProv.hasCheckin()"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="{{constants.PAGE_TITLE_ORDER}}" tabIcon="{{constants.PAGE_ICON_ORDER}}" [show]="storageProv.hasCheckin()"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="{{constants.PAGE_TITLE_QR}}" tabIcon="{{constants.PAGE_ICON_QR}}" [enabled]="!storageProv.hasCheckin()"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="{{constants.PAGE_TITLE_BONUS}}" tabIcon="{{constants.PAGE_ICON_BONUS}}"></ion-tab>
</ion-tabs>
menu.ts:
import { Component, ViewChild } from '@angular/core';
import { IonicPage, Nav, MenuController } from 'ionic-angular';
import { StorageProvider } from '../../providers/storage/storage';
import { PAGE_TITLE_HOME, PAGE_TITLE_ORDER, PAGE_TITLE_QR, PAGE_TITLE_BONUS, PAGE_TITLE_MAPS, PAGE_TITLE_SETTINGS, PAGE_HOME_INDEX, PAGE_ORDER_INDEX, PAGE_QR_INDEX, PAGE_BONUS_INDEX, PAGE_MAPS_INDEX, PAGE_ICON_HOME, PAGE_ICON_ORDER, PAGE_ICON_QR, PAGE_ICON_BONUS, PAGE_ICON_MAPS, PAGE_ICON_SETTINGS } from '../../config/constants';
@IonicPage()
@Component({
selector: 'page-menu',
templateUrl: 'menu.html',
})
export class MenuPage {
rootPage = 'TabsPage';
@ViewChild(Nav) nav: Nav;
// You have to change the tab for the menu information here!
preOrderPages: PageInterface[] = [
{ title: PAGE_TITLE_HOME, pageName: 'TabsPage', tabComponent: 'HomePage', index: PAGE_HOME_INDEX, icon: PAGE_ICON_HOME },
{ title: PAGE_TITLE_QR, pageName: 'TabsPage', tabComponent: 'QrCamPage', index: PAGE_QR_INDEX, icon: PAGE_ICON_QR },
{ title: PAGE_TITLE_BONUS, pageName: 'TabsPage', tabComponent: 'CouponPage', index: PAGE_BONUS_INDEX, icon: PAGE_ICON_BONUS },
{ title: PAGE_TITLE_SETTINGS, pageName: 'SettingsPage', icon: PAGE_ICON_SETTINGS },
]
postOrderPages: PageInterface[] = [
{ title: PAGE_TITLE_ORDER, pageName: 'TabsPage', tabComponent: 'PreOrderPage', index: PAGE_ORDER_INDEX, icon: PAGE_ICON_ORDER },
{ title: PAGE_TITLE_QR, pageName: 'TabsPage', tabComponent: 'QrCamPage', index: PAGE_QR_INDEX, icon: PAGE_ICON_QR },
{ title: PAGE_TITLE_BONUS, pageName: 'TabsPage', tabComponent: 'CouponPage', index: PAGE_BONUS_INDEX, icon: PAGE_ICON_BONUS },
{ title: PAGE_TITLE_SETTINGS, pageName: 'SettingsPage', icon: PAGE_ICON_SETTINGS },
]
constructor(public menu: MenuController,
private storageProv: StorageProvider) {
this.enableMenu();
}
enableMenu(){
this.menu.enable(!this.storageProv.hasCheckin(), 'preOrderMenu');
this.menu.enable(this.storageProv.hasCheckin(), 'postOrderMenu');
}
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index};
}
if (this.nav.getActiveChildNavs()[0] && page.index != undefined) {
// this.nav.getActiveChildNav() is the tabsnavigation. You can select
// an index of the tabs here.
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
this.nav.setRoot(page.pageName, params);
}
}
isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];
if(childNav) {
if(childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
return 'primary';
}
return;
}
if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
return 'primary';
}
}
}
export interface PageInterface {
title: string;
pageName: string;
tabComponent?: any;
index?: number;
icon: string;
}
menu.html:
<!-- Pre order menu -->
<ion-menu id="preOrderMenu" [content]="content">
<ion-header>
<ion-navbar>
<ion-title>MenĂĽ</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose *ngFor="let page of preOrderPages" (click)="openPage(page)">
<ion-icon item-start [name]="page.icon" [color]="isActive(page)"></ion-icon>
{{ page.title }}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Post order menu -->
<ion-menu id="postOrderMenu" [content]="content">
<ion-header>
<ion-navbar>
<ion-title>MenĂĽ</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose *ngFor="let page of postOrderPages" (click)="openPage(page)">
<ion-icon item-start [name]="page.icon" [color]="isActive(page)"></ion-icon>
{{ page.title }}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Expected behaviour: The menu changes dynamically based on wether this.storageProv.hasCheckin() is true or false.
Observed behaviour: Only the first menu “preOrderMenu” is active always.
Any help would be much appreciated!