Side menu not loading pages

Question

I have an Ionic2 app that has a basic side menu layout with a few pages that need loading in to view.

My app.html looks like this

<ion-menu [content]="content" persistent="true">

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p.component)">
                {{ p.title }}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


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

and my app.component.ts looks like this.

import { Component } from '@angular/core';

import {IonicApp, Platform, NavController} from 'ionic-angular';
import {LoginPage} from '../pages/login/login';

import {MessagesPage} from '../pages/messages/messages';
import {ProfilePage} from '../pages/profile/profile';
import {TripsPage} from '../pages/trips/trips';


@Component({
    templateUrl: 'app.html'
})

export class PitchHikeApp {

    rootPage = LoginPage;

    static get parameters() {
        return [[IonicApp], [Platform]];
    }

    constructor(public navCtrl: NavController) {}

    pages = [
        {title: 'My Trips', component: 'TripsPage'},
        {title: 'Messages', component: 'MessagesPage'},
        {title: 'Profile', component: 'ProfilePage'}
    ]

    openPage(page) {
        console.log(page);
        this.navCtrl.push(page);
    }

}

The issue for me now is that everything works fine. The page loads, the menu populates with my pages from my pages array.

I've pretty much followed the code from the Ionic2 site but when I click the menu items it fires off a load of console errors. The main error is "Cannot read property 'push' of undefined"

The page parameter is outputting the component for which page we're looking to fire so i'm not too sure why this is coming back as undefined.

check URL ionicframework.com/docs/v2/api/navigation/NavController/… you need to define @ViewChild and in pages array item looks like {title: 'My Trips', component: TripsPage} — ranakrunal9
Perfect that works just how I needed it I changed it from push to setRoot though to completely change the pages as with push it was showing the Back button next to my menu icon causing the menu item to not work. — Shane Jones
Do you want to add your comment as an answer and i'll mark it up for you? Thanks — Shane Jones

ranakrunal9 ranakrunal9 · Accepted Answer · 2016-12-14T10:30:11

Check the NavController API documentation you need to define @ViewChild and pages array need to be defines as below :

pages = [
    {title: 'My Trips', component: TripsPage},
    {title: 'Messages', component: MessagesPage},
    {title: 'Profile', component: ProfilePage}
];

Side menu not loading pages

1 Answers