How to navigate between pages using buttons with Ionic?

Question

I’m trying to understand how to navigate between pages with ionic2. I want that by clicking the button below it redirect me to HomePage, how can I do this?

Button in.html menu

<button ion-button color="light">Button</button>

My . ts

@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',  

})
export class MenuPage { 

  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
  }

  showAlert() {
    const alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'teste',
      buttons: ['OK']
    });
    alert.present();
  }

  openSobre(){
    this.navCtrl.push(HomePage, {}, {animate: true} );    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MenuPage');
  }

}

Answer 1

Let’s assume you want to go from Homepage to Sobrepage by clicking a button that is on the Homepage.

Within Homepage.ts import the NavController and the component SobrePage. Create a function openSobre(), which will be called when clicking the button.

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { SobrePage } from "../sobre/sobre";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) { }  

  openSobre(){
    this.navCtrl.push(SobrePage, {}, {animate: true} );    
  }
}

On your button, call the function openSobre().

<button ion-button (click)="openSobre()" color="light">Button</button>

Further details can be found on documentation