I am very new to Ionic. I have a simple code like this:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title></ion-title>
</ion-toolbar>
<ion-content>
<ion-list *ngFor="let item of menus">
<button ion-item (click)="openPage(m)">
{{item.title}}
<ion-icon name="flask" item-right></ion-icon>
</button>
</ion-list><br />
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
and the Typescript:
import { Component, ViewChild} from '@angular/core';
import { ionicBootstrap, Platform, MenuController, Nav, NavParams} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {ListPage} from '../list/list';
import {CalendarPage} from '../calendar/calendar';
@Component({
templateUrl: 'build/pages/centers/centers.html',
})
export class CentersPage {
@ViewChild(Nav) nav: Nav;
rootPage: any = ListPage;
menus: Array<{title: string, component: any}>;
constructor(
private platform: Platform,
private menu: MenuController) {
// set our app's pages
this.menus = [
{ title: 'JPTS Centers', component: ListPage},
{ title: 'JPTS Calendar', component: CalendarPage}
];
}
openPage(menus) {
this.menu.close();
this.nav.setRoot(menus.component);
}
}
Now problem there is that I am unable to loop through the components, liking to another page just like I did for the title. I really need a help as soon as possible