Ion-menu not appearing at all



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-menu [persistent]="true" side="left" [content]="content">
            <button ion-button item-left *ngFor="let item of items">
                <ion-icon [name]="item.icon"></ion-icon>
                {{item?.title | translate | async}}
<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";

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

    public selectedIndex = 0;

    public rootPage;
    public items = [];

    get menuType() {
      return Config.menuType;

    @ViewChild('myTabs') tabRef: Tabs;

        private menuService: MenuService,
        private messageService: MessageService,
        private menuCtrl: MenuController
    ) {
        Config.config.pages.forEach(p => {
            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') {

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


   * 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;
        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";
        console.error("We don't know this page: " + p);
        return "";

  private toggleMenu() {"toggling menu")

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.


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


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


I’ve added

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

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


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


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


I did not, I tried but failed


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