Ionic 2 - Side menu with navigation between pages (back button)

@luiszunigacr wrote:

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!!

Posts: 1

Participants: 1

Read full topic