How can I create a different content at side menu for each page?

Ionic Framework ionic-v3
1

Hello guys,

I need to create a different side menu for each page.
For example:

  • Menu for Page 1

  • Page 10

  • Page 11

  • Page 12

  • Menu for Page 2

  • Page 20

  • Page 21

  • Page 22

  • Menu for Page 3

  • Page 30

  • Page 31

  • Page 32

Any sugestions, please?

Thanks!

2

Check the documentation for menu controller, you just need to enable or disable the proper menu, is in section multiple menus on same side.

Here is the link: http://ionicframework.com/docs/v2/api/components/menu/MenuController/

3

Ok, but I don’t understand the usage of MenuContoller.
Where I need to put the ion-menu for my specific page?
Folow my code where I am trying to define a menu for HomePage:

  • home.html
    <ion-header>
     <ion-navbar>
      <ion-title>Ionic Blank</ion-title>
     </ion-navbar>
    </ion-header>

  <ion-content padding>
   <button ion-button block (click)="toggleMenu();">Toogle Menu</button>
  </ion-content>

  • home.ts
    import { Component } from '@angular/core';
    import { NavController, MenuController } from 'ionic-angular';
    import { Page1 } from '../page1/page1';
    import { Page2 } from '../page2/page2';

  @Component({
   template: '<ion-menu [content]="content">
           <ion-header>
            <ion-toolbar>
             <ion-title>Menu</ion-title>
            </ion-toolbar>
           </ion-header>
           <ion-content>
            <ion-list>
             <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
              {{p.title}}
             </button>
            </ion-list>
           </ion-content>
          </ion-menu>
          <ion-nav [root]="homePage" #content swipeBackEnabled="false"></ion-nav>',
  selector: 'page-home',
  templateUrl: 'home.html'
  })

  export class HomePage {

   homePage: any = HomePage;
   pages: Array<{title: string, component: any}>;

   constructor(public navCtrl: NavController, public menuCtrl: MenuController) {
    this.pages = [
     { title: 'Page One', component: Page1 },
     { title: 'Page Two', component: Page2 }
    ];
   }

   openMenu() {
    console.log('openMenu');
    this.menuCtrl.open();
   }

   closeMenu() {
    console.log('closeMenu');
    this.menuCtrl.close();
   }

   toggleMenu() {
    console.log('toggleMenu');
    this.menuCtrl.toggle();
   }

   openPage(page) {
    console.log('openPage');
    this.navCtrl.push(page.component);
   }
  }

What am I doing wrong?

4

Well, you need to put the menu in the template.

In your code you have a html template for homepage, and in the view you define the menu, so when you compile it, don’t have idea what shows, the home html or the menu?

So, with that said, if you only need the home page view, you should put it on the same html or within inline template, like this:

  • Home html, or inline template:

    <ion-menu [content]=“content”>


    Menu





    {{p.title}}



     <!-- dont change the root view-->

    <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

    <!-- here start the actual home view-->
    <ion-header>
     <ion-navbar>
      <ion-title>Ionic Blank</ion-title>
     </ion-navbar>
    </ion-header>
    <ion-content padding>
      <!-- you don't need a function to toggle the menu, just add the attribute-->
          <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
        </button>
    </ion-content>

That with just the home view, if you need more views, that I supposed you will need for the side menu to make actual sense, you need to separate menus in one component, and actual views in different components, then:

with Ionic RC0, in app.component.ts, make

rootPage = SideMenuPage;

In SideMenuPage ts:

rootPage = HomePage;

and to change view:

this.nav.setRoot(Page);

Be aware that if you disable swipe back, you need to add something (like a button) to activate the menu.

Also, you can create a project menu starter with cli

ionic start mySideMenu sidemenu --v2

5

Hi, How did you solve this issue. I am also stack. I will greatly appreciate your help.

Best Regards

6

You can give id to menu (example ) and while toggle open specific menu.