Side Menu displays empty - need help

Ionic Framework ionic-v3
1

Hi There, I’m trying to display side menu combined with tabs. Tabs are working as expected, but while clicking on the menu button it displays empty menu with the topic “pages”. Please help me on this, I have gone through all the similar post but it did not help me to solve the issue

menu.html

<ion-menu [content]="content">
  <ion-header>
    <ion-navbar>
      <ion-title>Menu</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-button menuClose *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon start [name]="p.icon" [color]="isActive(p)"></ion-icon>
        {{ p.title }}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>


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

menu.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular';

export interface PageInterface {
  title: string;
  pageName: string;
  tabComponent?: any;
  index?: number;
  icon: string;
}

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {

  rootPage = 'TabsPage';

  @ViewChild(Nav) nav: Nav;

  pages: PageInterface[] = [
    { title: 'Tab 1', pageName: 'TabsPage', tabComponent: 'Tab1Page', index: 0, icon: 'home' },
    { title: 'Tab 2', pageName: 'TabsPage', tabComponent: 'Tab2Page', index: 0, icon: 'contacts' },
    { title: 'Special', pageName: 'SpecialPage', icon: 'home' }
  ]

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MenuPage');
    alert(this.pages.length);
  }

  openPage(page: PageInterface) {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // The active child nav is our Tabs Navigation
    if (this.nav.getActiveChildNav() && page.index != undefined) {
      this.nav.getActiveChildNav().select(page.index);
    } else {
      // Tabs are not active, so reset the root page 
      // In this case: moving to or from SpecialPage
      this.nav.setRoot(page.pageName, params);
    }
  }

  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNav();

    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
    return;
  }


}

tabs.html

<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="contacts"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  tab1Root = 'Tab1Page';
  tab2Root = 'Tab2Page';
  myIndex: number;
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex || 0;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TabsPage');
  }

}

tab1.html

<ion-header>
  <ion-navbar>
    
      <button ion-button menuToggle start>
        <ion-icon name="menu"></ion-icon>
      </button>
    
    <ion-title>Tab One</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  This is my Tab 1 content.
</ion-content>

tab2.html

<ion-header>
  <ion-navbar>
    
      <button ion-button menuToggle start>
        <ion-icon name="menu"></ion-icon>
      </button>
    
   <ion-title>Tab Two</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  This is my Tab 2 Page
</ion-content>

Screen Shots

Tabs Page

tabs
tabs.JPG330×561 7.7 KB

Tab Page Displays Empty Menu

empty-menu
empty-menu.JPG329×566 6.48 KB

2

I tested your example and this is working, The only thing i have diffrent is : i placed menu.html and menu.ts code in app.component.ts and app.html.

Can you show your app.component.ts and app.html ?

3

Thanks for your reply. Yes I do not have the side menu structure as you mentioned, let me try this way and reply with result ASAP.

Also please advise, is it possible to dynamically form the menu items while the code for the menu resides in app.component.ts & app.html?

4

Yes you can.

Check my example in this post : Dynamically Adding ion-menu in app.component.html

In short:
bind your pages: PageInterface[] variable in a service. Then bind your menu items on this variable theny ou can change the content of yourService.pages every where this service is imported. This will change your menu dynamically

5

That’s awesome! I’m able to see the menu items after placing it in app.component.ts. and app.html. Thanks a lot for your support.

I have one more query related to method isActive(), this method returns the “primary” color if the particular menu item is selected else returns nothing. But while running that I’m getting an error like “childNav.getSelected is not a function”, I’m attaching the code for the same.

app.html

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon [name]="p.icon" [color]="isActive(p)"></ion-icon>  {{p.title}} 
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

isActive() method:

isActive(page: PageInterface) {
    
    let childNav = this.nav.getActiveChildNav();

     if (childNav) {
       if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
         return 'primary';
       }
       return;
     }
    
   
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName ) {
      return 'primary';
    }

    return;
  }
6

I never used tabs component but

The reference you get in childNav is probably not the Tabs ref which have this getSelect function. Try to use childNav.parent.getSelected() Or check if (childNav && childNav.getSelected) {}