CODEWITHSUNDEEP
typescriptionic2
raimtoon
raimtoon

Reputation: 725

Cannot open menu in ionic2

I'm new to ionic2 and TypeScript.

My question is how to open menu in ionic2?

The following code does not work when I press menu icon in page1. And I tried app.getComponent('leftMenu').enable(true); in page1.ts but when I run the app, the page becomes blank screen.

Does anyone give me any suggestion or hint?

page1.html

<ion-navbar *navbar>
  <button menuToggle="leftMenu">
    <ion-icon name='menu'></ion-icon>
  </button>
  <ion-title>Page 1</ion-title>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
</ion-content>

page1.ts

import {IonicApp, Page} from 'ionic-angular';


@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  constructor(app: IonicApp) {
    //app.getComponent('leftMenu').enable(true); <- screen becomes blank.
  }
}

app.ts

import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {Page1} from './pages/page1/page1';
import {Page2} from './pages/page2/page2';


@App({
  template: `
    <ion-menu [content]="content" id="leftMenu" side="left">
      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>
      <ion-content>
        <ion-list>
          <button ion-item (click)="openPage(page1)">
            Page1
          </button>
          <button ion-item (click)="openPage(page2)">
            Page2
          </button>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-nav [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = Page1;
  page1: any = Page1;
  page2: any = Page2;
  constructor(
    platform: Platform, 
    private menu: MenuController,
    private app: IonicApp
  ) {
    this.menu = menu;
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // Reset the nav controller to have just this page
    // we wouldn't want the back button to show in this scenario
    this.rootPage = page;

    // close the menu when clicking a link from the menu
    this.menu.close();
  }
}

Upvotes: 2

Views: 1180

Answers (1)

AishApp
AishApp

Reputation: 4162

Try including the below changes in your code

  • Include id in your ion-nav inside app.ts

     <ion-nav id='nav' [root]="rootPage"></ion-nav>

  • Replace the below code in your method openPage(page)

    openPage(page) {
       //Get the menu navigation component
  let nav = this.app.getComponent('nav'); 
  this.menu.close();
        //set the navigation root page as the page choosed
  nav.setRoot(page);
}

If the problem still persists, download the existing sidemenu template from ionic and check

ionic start yourProjectName sidemenu --v2 --ts

UPDATE on ionic beta 8 TS has to be edited by including ViewChild

import {ViewChild} from '@angular/core';
class MyApp {
    @ViewChild(Nav) nav: Nav;
    openPage(page) {
      this.nav.setRoot(page);
    }
}

Upvotes: 1

Related Questions