Side Menu displays empty

@karthikvks wrote:

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.JPG330x561 7.7 KB

Tab Page Displays Empty Menu

empty-menu.JPG329x566 6.48 KB

Posts: 1

Participants: 1

Read full topic