I'm new to hybrid apps development. First I want to know if it's possible to have navigation between pages using a side menu in Ionic 2. I was able to implement navigation between pages as shown in this tutorial and a menu as shown in the ionicdocs site. But when I click on a menu item, the menu sets the page as "rootPage", so I'm redirected to that page, but if I want to go back to home page I have to do that through the menu, I'd like to just press a back button.
Thanks in advance, this is my app.ts file:
import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';
@App({
template: `
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(categoriesPage)">
Categorías
</button>
<button ion-item>
Mis Compras
</button>
<button ion-item>
Lista de Deseos
</button>
<button ion-item>
Cerrar Sesión
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
public rootPage;
public app;
public menu;
public categoriesPage;
constructor(app: IonicApp, platform: Platform, menu: MenuController) {
this.app = app;
this.menu = menu;
this.categoriesPage = CategoriesPage;
platform.ready().then(() => {
StatusBar.styleDefault();
});
this.rootPage = HomePage;
}
openPage(page){
this.rootPage = page;
this.menu.close();
}
}
EDIT: Modified app.ts to use NavController, but now it's not even loading home page
import {App, IonicApp, Platform, NavController, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';
@App({
template: `
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(categoriesPage)">
Categorías
</button>
<button ion-item>
Mis Compras
</button>
<button ion-item>
Lista de Deseos
</button>
<button ion-item>
Cerrar Sesión
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
public rootPage;
public app;
public nav;
public categoriesPage;
constructor(app: IonicApp, platform: Platform, nav: NavController) {
this.app = app;
this.nav = nav;
this.categoriesPage = CategoriesPage;
platform.ready().then(() => {
StatusBar.styleDefault();
});
this.rootPage = HomePage;
}
openPage(page){
this.nav.push(page, {"test": ""});
}
}
categories.html:
<ion-navbar *navbar>
<ion-title>
Categories
</ion-title>
</ion-navbar>
<ion-content class="categories">
<ion-list inset>
<ion-item>
<ion-label>Categories</ion-label>
</ion-item>
</ion-list>
</ion-content>