How to use menu in a page that is not the root page?

Ionic Framework ionic-v3
1

My root page is a Login page, look my app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Login } from './../pages/login/login';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = Login;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

My Login page send me to the MessageList page, in this page Iā€™d like to use a menu. Look the MessageList html:

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <ion-item>A</ion-item>
      <ion-item>B</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent></ion-nav>

<ion-header>
  <ion-navbar hideBackButton="true">
    <button ion-button menuToggle>
      <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>Telmi!</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-list inset>
    <ion-item *ngFor="let m of messages" (click)="messageSelected(m)">
      {{m.subject}}
    </ion-item>
  </ion-list>

</ion-content>

But the button to toggle the menu is not appearing.

Whatā€™s the best way to use menu in a Ionic 2 project?

1 Like
3

You need two pages.

Sidemenu page

Message list page

4

I structured my app like this and Iā€™m still missing my menuToggle-button on every page where a back-icon is showing.
I also tried to set enable-menu-with-back-views="true" which I stumbled upon googling this issue. But I guess this setting is deprecated?
Any idea how to solve this issue?

5

Whatā€™s your code for navigating from login to sidemenu/messagelist?

6

Nevermind, I found out that you have to add persistent="true" to <ion-menu> to achieve my desired behaviour.

If you want to know fror other reasons:
I change pages with this.navCtrl.push(PAGE) or this.nacCtrl.setRoot(PAGE).

4 Likes
7

Hi i have a same situationā€¦ menuToogle is not appearing.
i even tried to include persistent=ā€œtrueā€ as <ion-menu [content]=ā€œcontentā€ persistent=ā€œtrueā€>
it dint work.

8

Same Condition with menuToogle is not appearing.:pensive:

9

This is stupid, you have to change menuToggle to [menuToggle] and the menu toggle button will appearā€¦