Accessing navCtrl in menu

Ionic Framework ionic-v3
1

I want to add menu to my Ionic app, so I added the following code to app.html:

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
        <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage('xxxPage')">
                Open
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

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

If I want to open a new page when click Open, should I put openPage() in app.component.ts? But to open a page, I need something like this.navCtrl.push(Stat);, but I cannot inject navCtrl in app.component.ts.

Can I put menu in home page? How to do so?

Thanks!

2

You can definitely use the NavController in app.component.ts :

import {ViewChild} from '@angular/core';
import {Nav} from 'ionic/angular';

export class MyApp {
   @ViewChild(Nav) navCtrl: Nav;
    
   constructor(){
   }
   
   openPage(somePage){
      this.navCtrl.push(somePage);
   }
  
}

As far as your other question goes, no, you cannot have a menu in your home page. All menus must be defined in app.html. You can check out the docs http://ionicframework.com/docs/api/components/menu/Menu/ to see what I mean.

It’s just how Ionic2/Ionic 3 has defined the implementation of menus.

Happy coding!

2 Likes
3

Thanks!

I want to close menu in openPage. Here’s my code:

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage: any = HomePage;
    @ViewChild(Nav) navCtrl: Nav;
    @ViewChild(MenuController) menuCtrl: MenuController;

    constructor(
        platform: Platform,
        statusBar: StatusBar,
        splashScreen: SplashScreen
    ) {
        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();
            statusBar.overlaysWebView(false);
            statusBar.backgroundColorByHexString('#FFFFFF');

            splashScreen.hide();
        });
    }

    openPage(page: string) {
        this.navCtrl.push(Stat);
        this.menuCtrl.close();
    }
}

But it says:

MyApp.html:9 ERROR TypeError: Cannot read property 'close' of undefined
    at MyApp.webpackJsonp.455.MyApp.openPage (app.component.ts:34)
    at Object.eval [as handleEvent] (

Should I use this.menuCtrl this way?

4

You’re supposed to inject the MenuController into your constructor, not use the ViewChild decorator :

import {MenuController} from 'ionic-angular'

export class MyApp {
    
     constructor(public menuCtrl : MenuController) {
     }
     
     openPage(page : string){
           this.navCtrl.push(Stat);
           this.menuCtrl.close();
     }
}

You don’t need to do it programmatically though. You can also just do this :

<button ion-button (click)="openPage()" menuClose>Open Page</button>

just add the menuClose attribute to the button and it will close once you click the button

2 Likes