I am a beginner with Ionic and I am attempting to access the side menu options by clicking on them. However, I am encountering an issue where I am unable to navigate to the desired page and receiving the error message: "Cannot read property 'component' of undefined". How can I successfully access these pages by clicking on the side menu options? Whenever I use push, all options lead to the same page rather than their specific destination.
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Nav} from 'ionic-angular';
import { DashboardPage } from '../dashboard/dashboard';
import { ProfilePage } from '../profile/profile';
import { sidemenuDeclaration } from '../../sideMenuDeclare';
import { MenuController } from 'ionic-angular';
import { FeaturesPage } from '../features/features';
import { MediaPage } from '../media/media';
import { BlogPage } from '../blog/blog';
@IonicPage()
@Component({
selector: 'page-menu',
templateUrl: 'menu.html',
})
export class MenuPage {
@ViewChild(Nav) nav:Nav;
rootPage:any = DashboardPage;
constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController) {
}
options : sidemenuDeclaration[] = [
{title : "Home" , icon : "home" ,component : DashboardPage},
{title : "Features" ,icon : "settings" , component : FeaturesPage},
{title : "Media" , icon : "images" , component : MediaPage},
{title : "Blog" ,icon : "create" ,component : BlogPage},
{title : "Contact" , icon : "contact" ,component : ProfilePage},
{title : "Like Us" , icon : "logo-facebook" ,component : ProfilePage},
{title : "Follow Us" , icon : "logo-twitter" ,component : ProfilePage}
]
ionViewDidLoad() {
console.log('ionViewDidLoad MenuPage');
}
goToProfile(){
this.navCtrl.push(ProfilePage);
}
menuOptions(op){
this.nav.setRoot(op.component);
}
}
<ion-menu [content]='content'>
<ion-header>
<ion-toolbar color = "danger">
<ion-title (click) = "goToProfile()">
<ion-icon name="contact"></ion-icon>Profile
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<button ion-item *ngFor = "let op of options" (click) = "menuOptions(op)">
<ion-icon name = {{op.icon}}></ion-icon>
{{op.title}}
</button>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>