Create a side menu for a page

Ionic Framework ionic-v3
1

All the examples create the menu in the app.component.html which is global. Is it possible to create a local menu for a lazy loaded page?

2

Maybe this way?

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(homePage)">
        Home
      </button>
      <button ion-item (click)="openPage(friendsPage)">
        Friends
      </button>
      <button ion-item (click)="openPage(eventsPage)">
        Events
      </button>
      <button ion-item (click)="closeMenu()">
        Close Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
2 Likes
3

Would this be in the page.html or app.html?

1 Like
4

Edit: Sorry, i think you nedd to do in app

Maybe can be done other way

5

What does the documentation mean when it says :

‘The menu element should be a sibling to the app’s content element’

6

Maybe here we could find another solution

7

If it has to be inside app.html then it is global. So probably it is not possible to have a menu for just one page

8

As far as I know, I don’t think you can add a local menu for a page, the documentation clearly says :

“The menu element should be a sibling to the app’s content element”

However, if you’re looking to have specific menus open up in different pages, here’s how I would do it -

1)Create multiple menus in app.html and attach them to ion-nav as usual
2)Give each menu an id
Ex : page1menu, page2menu, etc
3)Then add a button in that page whose click event links to a function in that page’s .ts file to open that page’s menu :

.html

 <button ion-button (click)="openPage1Menu()">Open Page 1 Menu</button>

.ts

import {MenuController} from 'ionic/angular';

export class Page1 {
     
    constructor(public menuCtrl : MenuController){
    }

    openPage1Menu(){
        this.menuCtrl.enable(false, page2menu);  //disabling all other menus
        this.menuCtrl.enable(false, page3menu);
        this.menuCtrl.enable(true, page1menu);
        this.menuCtrl.open(page1menu);
    }
  
}

Adding an implementation like this in each page would allow you to open different menus depending on the page you’re in. Note that all other menus have to be disabled before you open a specific menu.

I guess this is how I would do it. Open to other more effective solutions!

9

Yes this is also how the example on the components page does it, but it feels does not feel clean. The point of components or lazy loaded pages is that I have everything in one place. If I drop that page (and the link to it) nothing should break.

In my case it is a table of contents to quickly jump inside a page. I don’t see why I should add to the app startup time something that the user may never visit.

10

Yeah honestly, I’ve never been impressed with Ionic 2’s implementation of a menu. I find it unnecessarily complicated. It would have been a gazillion times easier if you could just add a menu component to a page like any other component. But now you have to set it up globally in app.html and then make the pages that use the menu root pages just so you can see the menu toggle button.

It was really a pain implementing the menu in my application. I hope the framework comes up with a simpler solution soon.

Let me know if you figure out an easier way to achieve this use case.

2 Likes
11

I currently use a fab button that opens a popover. I was looking for the menu because the popover sometimes opens outside of the screen, but now I just force the position

12

Can I see how you did the popover implementation? Might be useful to my project

13

Inject the PopoverController into your page

import { IonicPage, PopoverController } from 'ionic-angular';
import { Component } from '@angular/core';
@IonicPage()
@Component({
  selector: '...',
  templateUrl: '...'
})
export class MyPage {
  // inject PopoverController
  constructor(public popoverCtrl: PopoverController) {}
  presentPopover(ev): void {
    let popover = this.popoverCtrl.create('PopoverPage', {
      // dynamic data to display
    }, {
      // class to force positioning
      cssClass: 'my-class'
    });
    popover.present({ev; ev});
  }
}

In the page html I have the fab button, add whatever you like to open that popover:

<ion-header>
  ...
</ion-header>
<ion-content>
  <ion-fab top right>
    <button ion-fab mini (tap)="presentPopover($event)">
      <ion-icon name="list"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

Then create the page that you want to present, in my example it is named PopoverPage. The html content of that page should not be wrapped in ion-content. In my case it is just a list:

<ion-list>
  <ion-list-header>table of contents</ion-list-header>
  ...
</ion-list>
2 Likes
14

You can’t do that with modals?

15

You can, but modal is just for a message (text) it does not display another component/page.

I have interaction inside, like then you tab a toc-item the main view scrolls to that item.

16

Are you sure? i implemented the last week a search bar in a modal and you can navigate to another components or pages

17

I’ve used a modal like a page before. If i’m not mistaken an alert only shows a message

18

My bad, you are right. I was confusing modal with alert. Yes probably can be used in the same way

19

Would be great if menu would work in a similar way.

2 Likes