Menu Toggle Button in all pages

Ionic Framework ionic-v3
1

I’ve set up a menu in my app.html and I want to be able to access this menu by adding a menu toggle button in the nav bar of all pages that need access to this menu :

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

However, according to the docs, you need to make the page that needs access to the menu the root page or else it will not display the menu toggle button in the navbar. So here are my two major issues right now :

1)The menu toggle button is still not visible when I set the root page to that page :

    goToNextPage(){
         this.navCtrl.setRoot(theNextPage);
     }

2)I need to be able to pass data to that next page, and I don’t know I’ll be able to do that using setRoot. I usually just do

     this.navCtrl.push(theNextPage, { data : some-data-to-be-passed });

So anyone please, how could I make this work?

2

Also, in the menu, I’ve set persistent to true :

       <ion-menu persistent = 'true' id='menu' side="left" type='reveal' [content]="mycontent">
       </ion-menu>
3

Could someone help me please? I feel like it’s a simple use case and that this shouldn’t be hard to do. Just need an answer asap and would appreciate any help

4

Hello,

For the “hamburger menu”, there is a pre-packaged app in ionic tutorials If I remember, you can just copy and paste what you need in sidemenu files.

ionic start sidemenu

More info on the behavior of side menu:

For your 2nd question, no you can’t use setRoot to pass data to another page directly.
You have to create a function in your app, like (passDataAndThenChangeRoot) in your homepage, that will encapsulate both the rootpage change and data to be passed. For example on button click, use something like that:

passDataAndThenChangeRoot(){
  this.navCtrl.push(Page1, data);
  this.navCtrl.setRoot(HomePage);
}

Be careful that if you have active listeners on your rootpage or user, it can change the current page at the same time (or bug).

Hope it gives you some insights,

5

Wouldn’t this.navCtrl.push(Page1, data) cause the app’s context to shift to that page and thus this.navCtrl.setRoot(HomePage) would never run?

6

Normally no, because of the async nature of Ionic, but run a test it will take you 30 seconds to figure it out.

EDIT : If it fails, use .then() statement inside of the function I showed you.

7

How do I know if it fails? Is there a way to check if the page has been set to the root?

But what’s discouraging is that I still don’t see the menu toggle button in the navbar of the next page. This is getting super frustrating :weary:

8

Did you create a new app with side menu like I suggested? ionic start sidemenu?

Then to test a root page you need to use it with an app that has as a least 2 pages :wink:
And it’s often linked with an auth check, like if user = ok, go to RootPage, if not ok >> go to LoginPage or Signup page.

I suggest you dig in some good tutorials, to help you start over.

9

I went through the side menu template app and now I’m able to see the toggle menu button in all pages. Now the only issue is that I’m not able to pass data to the next page if I’m setting it as the root page as well :

      this.navCtrl.push(NextPage, { data : somedata}).then(()=>{
            this.navCtrl.setRoot(NextPage);
      });

Doing it like this doesn’t allow the data to be passed to the next page. Can you think of a work around maybe?