Side menu is not working?


i am adding this to my existing app but it’s not working and when i make a separate app then it’s worked fine. why?
THis is my code:

import { SettingsPage } from './../settings/settings';
import { AddressesPage } from './../addresses/addresses';
import { TabsPage } from './../tabs/tabs';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, Nav } from 'ionic-angular';
export interface PageInterface {
  title: string;
  pageName: string;
  tabComponent?: any;
  index?: number;
  icon: string;
  selector: 'page-menu',
  templateUrl: 'student.html',
export class MenuPage {
  // Basic root for our content view
  rootPage = 'TabsPage';
  // Reference to the app's root nav
  @ViewChild(Nav) nav: Nav;
  pages: PageInterface[] = [
    { title: 'Tab 1', pageName: 'AddressesPage', tabComponent: 'Tab1Page', index: 0, icon: 'home' },
    { title: 'Tab 2', pageName: 'SettingsPage', tabComponent: 'Tab2Page', index: 1, icon: 'contacts' },
  constructor(public navCtrl: NavController) { }
  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) {
    } 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';
    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';


<ion-menu [content]="content">
      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{ p.title }}
<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


love your code, its neat and OOP.

side menu suposed to have ion content

dont forget usually this in your bootstrap like app.html

<ion-menu  (ionOpen)="menuOpened()"  [content]="content" >
    <ion-toolbar  >

      anything u want to add here, usually an ion-list

then after closing ion menu tag, put the ion nav

<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>

notice that rootPage, if you want to have tab and side menu, you can intialize rootPage as tabbedPage

i think its nothing to do with your page flow logic


I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.


thanks for this valuable suggestion.:grinning: