I’m new to hybrid apps development. I’d like to know if it’s possible to have navigation between pages using a side menu in Ionic 2.
This is my app.ts file, but it’s not even loading home page:
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();
}
}
This is my home.html, the page that should be displayed at startup:
<ion-navbar *navbar>
<ion-title>
GitHub
</ion-title>
</ion-navbar>
<ion-content class="home">
<ion-list inset>
<ion-item>
<ion-label>Username</ion-label>
<ion-input [(ngModel)]="username" type="text"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button block (click)="getRepos()">Search</button>
</div>
<ion-card *ngFor="#repo of foundRepos" (click)="goToDetails(repo)">
<ion-card-header>
{{ repo.name }}
</ion-card-header>
<ion-card-content>
{{ repo.description }}
</ion-card-content>
</ion-card>
</ion-content>
And this is categories.html, where the first menu item should redirect:
<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>
If I use MenuController instead of NavController it works, but I want navigation with a back button in every page (except for home page). Thanks in advance!!