Ion-menu not appearing at all


#1

Hi,

I am trying to set up an optional tabs or menu layout.
Wile for now I didn’t conditionaly hide my menu I’m having the current html

<ion-tabs *ngIf="menuType == 'tabs'" #myTabs itemsPlacement="bottom" primary>
    <ion-tab *ngFor="let item of items" [tabIcon]="item.icon" [root]="item.type" [tabTitle]="item.title | translate | async"></ion-tab>
</ion-tabs>

<ion-menu [persistent]="true" side="left" [content]="content">
    Hoi
    <ion-content>
        <ion-list>
            <button ion-button item-left *ngFor="let item of items">
                <ion-icon [name]="item.icon"></ion-icon>
                {{item?.title | translate | async}}
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>

The idea is to have a *ngIf on the ion-nav at the bottom

This is linked to a component

import {Tabs, MenuController} from 'ionic-angular';
import {Component, ViewChild} from '@angular/core';
import {Overview} from "./tabs/overview/overview";
import {Reload} from "./tabs/reload/reload";
import {Messages} from "./tabs/messages/messages";
import {Faq} from "./tabs/faq/faq";
import {MenuService} from "./tabs/menu.service";
import {MessageService} from "../../providers/message/message.service";
import {Config} from "../../config/config";

@Component({
    template: require('./maintabs.html'),
})
export class MainMenu {

    public selectedIndex = 0;

    public rootPage;
    public items = [];

    get menuType() {
      return Config.menuType;
    }

    @ViewChild('myTabs') tabRef: Tabs;

    constructor(
        private menuService: MenuService,
        private messageService: MessageService,
        private menuCtrl: MenuController
    ) {
        Config.config.pages.forEach(p => {
          this.items.push({
            type: MainMenu.getTypeFromString(p),
            title: "tab_" + p,
            icon: MainMenu.getIconFromString(p)
          });
        });

        if (this.menuType === 'drawer') {
          this.rootPage = this.items[0].type;
        }

        this.menuService.subscribe(tabAsString => {

          if (tabAsString === 'toggle_menu') {
            this.toggleMenu();
            return;
          }

          let count = 0;
          Config.config.pages.forEach(p => {
            if (p === tabAsString) {
              if (Config.menuType === 'tabs') {
                this.tabRef.select(count);
              } else if (Config.menuType === 'drawer') {
                //we know it exists go for it
                this.rootPage = MainMenu.getTypeFromString(tabAsString);
              }
            }
            count++;
          });



        })
    }


  /**
   *
   * Adding a new type? Make sure the key tab_{tabname} exists so the label can be displayed
   * The icons used can be found on the website of ionic (ionic icons)
   *
   */

  private static getTypeFromString(p: string): any {
    switch(p) {
      case "overview":
      case "overview_bars":
        return Overview;
      case "reload":
      case "reload_tabbed":
        return Reload;
      case "messages":
        return Messages;
      case "faq":
        return Faq;
      default:
        console.error("We don't know this page: " + p);
        return null;
    }
  }
  private static getIconFromString(p:string): string {
    switch (p) {
      case "overview":
      case "overview_bars":
        return "stats";
      case "reload":
      case "reload_tabbed":
        return "cart";
      case "messages":
        return "mail";
      case "faq":
        return "chatbubbles";
      default:
        console.error("We don't know this page: " + p);
        return "";
    }
  }

  private toggleMenu() {
    console.info("toggling menu")
    this.menuCtrl.toggle("left");
  }
}

As you see i’ve added some stuff to try to open the menu.

Could anyone tell me why this doesn’t work (No errors).
Do I have to be in the root component to add a menu? My root component is a ion-nav which includes this page. Originally it will show a login/activation page.


#2

Oh, When I inspect it is there, I just can’t seem to toggle it, nor does that persistent menu-toggle button appear ever.


#3

adding .show-menu does not actually show the menu I have to manually remove the transform property to show the menu. I’m confused.


#4

I’ve added

        <button ion-button menuToggle="left">
            <ion-icon name="menu"></ion-icon>
        </button>

To my subpage, even when I remove the persistent property it still displays. GG

Oh yes, it doesn’t work though Can’t display my menu. I’m hoping I don’t need to do some dirty css hacking to get it to work


#5

Ok so it had to be in the root, got it to work.

Unforunately this does mean I had to merge my main page with the appComponent which is now nearly 200 lines instead of both around 50


#6

Hello. How did you put a menu in a page not from the root? Thanks


#7

I did not, I tried but failed


#8

Do you have an alternative that worked. If you have please share with me sample application via kindly.