Dynamically enable menu with tabs not working

@Hesters wrote:

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!

Posts: 1

Participants: 1

Read full topic