How to navigate between pages using buttons with ionic?

Question

How to navigate between pages using buttons with ionic?

Navigation

#1 by (1 votes)

1

I'm trying to understand how navigations between pages with ionic2 work. I want that by clicking the button below it redirects me to HomePage , how can I do this?

Button in menu.html

<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');
  }

}

ionic angular ionic2

asked by anonymous 17.08.2018 / 20:46

1 answer

Button Font Change Popular Excel with Java object

score 1 · Accepted Answer

Let's say you want to go from HomePage to OverPage by clicking a button that is in HomePage.

Within HomePage.ts import the NavController and the SobrePage component. Create a openSobre() function, which will be called when you click 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 at documentation