I am trying to make an Android app using Ionic framework. I implemented a side menu and when I try to push pages from the side menu, I get an error in the console saying:

Cannot read property 'push' of undefined

app.ts

import { Component, ViewChild } from '@angular/core';
import { ModalController, ionicBootstrap, Platform, MenuController, NavController } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from './pages/home/home';
import {AppSettingsPage} from "./pages/app-settings/app-settings";
import {TabsPage} from "./pages/tabs/tabs";
import {ReserveRoomPage} from "./pages/reserve-room/reserve-room";
import {ConfirmedReservationsPage} from "./pages/confirmed-reservations/confirmed-reservations";


@Component({
  templateUrl: 'build/app.html',
  providers: [NavController]
})
export class MyApp {
  @ViewChild('nav') nav: NavController;
  private rootPage: any;
  private pages: any[];
  private icon = 'cog';

  constructor(private platform: Platform, private menu: MenuController,
  private modalCtrl: ModalController) {
  this.menu = menu;
    this.pages = [
      {title: 'Home', ponent: HomePage, icon: 'home'},
      {title: 'Settings', ponent: AppSettingsPage, icon: 'settings'},
      {title: 'Reserve Room', ponent: ReserveRoomPage, icon: 'add'},
      {title: 'My Reservations', ponent: ConfirmedReservationsPage, icon: 'book'},
    ];
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page){
    this.menu.close();
    this.nav.push(pageponent);
  }

}

ionicBootstrap(MyApp);

app.html

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

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

app-settings.ts (Example of a page I want to push)

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

@Component({
  templateUrl: 'build/pages/app-settings/app-settings.html',
})
export class AppSettingsPage {

  constructor(private navCtrl: NavController, private view: ViewController) {

  }
  goBack(){
    this.view.dismiss();
  }

}

(I imported ModalController because I wanted to preview my App UI flow and because push didn't work, I used each page as a modal just for preview purposes. For the final app, I need push and pop)

I am trying to make an Android app using Ionic framework. I implemented a side menu and when I try to push pages from the side menu, I get an error in the console saying:

Cannot read property 'push' of undefined

app.ts

import { Component, ViewChild } from '@angular/core';
import { ModalController, ionicBootstrap, Platform, MenuController, NavController } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from './pages/home/home';
import {AppSettingsPage} from "./pages/app-settings/app-settings";
import {TabsPage} from "./pages/tabs/tabs";
import {ReserveRoomPage} from "./pages/reserve-room/reserve-room";
import {ConfirmedReservationsPage} from "./pages/confirmed-reservations/confirmed-reservations";


@Component({
  templateUrl: 'build/app.html',
  providers: [NavController]
})
export class MyApp {
  @ViewChild('nav') nav: NavController;
  private rootPage: any;
  private pages: any[];
  private icon = 'cog';

  constructor(private platform: Platform, private menu: MenuController,
  private modalCtrl: ModalController) {
  this.menu = menu;
    this.pages = [
      {title: 'Home', ponent: HomePage, icon: 'home'},
      {title: 'Settings', ponent: AppSettingsPage, icon: 'settings'},
      {title: 'Reserve Room', ponent: ReserveRoomPage, icon: 'add'},
      {title: 'My Reservations', ponent: ConfirmedReservationsPage, icon: 'book'},
    ];
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page){
    this.menu.close();
    this.nav.push(page.ponent);
  }

}

ionicBootstrap(MyApp);

app.html

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

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

app-settings.ts (Example of a page I want to push)

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

@Component({
  templateUrl: 'build/pages/app-settings/app-settings.html',
})
export class AppSettingsPage {

  constructor(private navCtrl: NavController, private view: ViewController) {

  }
  goBack(){
    this.view.dismiss();
  }

}

(I imported ModalController because I wanted to preview my App UI flow and because push didn't work, I used each page as a modal just for preview purposes. For the final app, I need push and pop)

• javascript
• android
• ionic-framework
• ionic2

Share Improve this question Follow edited Sep 26, 2016 at 5:25 SANGEETH KUMAR S G 59899 silver badges2424 bronze badges asked Sep 26, 2016 at 4:32 user9492428user9492428 63311 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Set the @ViewChild to NavController but to Nav.

import { Nav } from 'ionic-angular';

.....

@Component({
  templateUrl: "build/app.html" //no need for the provider
})

class MyApp{
  @ViewChild(Nav) nav:Nav; //remove the 'id' from the HTML, it will find the ion-nav tag
  ....
  someFunction(){
    this.nav.push(YourComponent);
    //or
    this.nav.setRoot(YourComponent); 
  }
}

on IONIC 3, I used this and it works !! to call parent nav from childview

   var navParent = this.navCtrl.parent.parent as NavController;
   navParent.push('DetailsTabPage')