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

Question

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> 

Answer 1

You have to import the page you want te open:

import {ExamplePage} from 'path/to/page';

and then you can push this to the nav (stack):

openPage() {
   this.nav.push(ExamplePage);
}

Answer 2

Consider the pages that you navigate as a stack of pages

  nav.push(YourPage)

when you use nav.push(YourPags) - the new page is added to the top of the stack and then the previous views remains in the stack itself enabling you to use the back button to navigate to the previous view

  nav.setRoot(YourPage)

when you use nav.setRoot(YourPage) - sets the page as the first view in the stack and clears all other views in the stack

Answer 3

You want to use NavController for navigation http://ionicframework.com/docs/v2/api/components/nav/NavController/. Just inject it into your page via the constructor and then change your openPage function:

openPage(page) {
   this.nav.push(page);
}

Think of navigation working as a stack. You push a page on the stack and then a back button should appear letting you pop the page off the stack. Keep in mind that in order for a back button to appear you have to use the ion-navbar tag within the page you are navigating to.

Answer 4

That post is a copy of another answer I've given that will help you to navigate, and to send and receive data from a view to another (because you will obviously have that problem soon) :

First, sending data :

import { YourPage } from '../yourpage/yourpage';

@Component({
  template: `<button [navPush]="pushPage [navParams]="params">Go</button>`
})
class MyPage {
  constructor(){
    this.pushPage = YourPage;
    this.params = { id: 42 };
  }
}

The content of template can be written in an html file linked by the templateUrl parameter. That code will allow you to go to YourPage from MyPage with the following datas : { id: 42 }.

More information : http://ionicframework.com/docs/v2/api/components/nav/NavPush/

Second, receiving data

 constructor(public params: NavParams){
   // userParams is an object we have in our nav-parameters
   this.params.get('userParams');
 }

More information : http://ionicframework.com/docs/v2/api/components/nav/NavParams/