Ionic 2 customize the back button

Question

I want to customize the click action of the back button mentioned in this screen capture. I want this by clicking, I will not return to the previous page, but to the page that I indicate to myself, or I will do the treatment before returning.

Answer 1

To configure the default back button action, you need to override the backButtonClick () method of the NavBar component.

Step 1: In the "custom-class.ts" import the Navbar component. Create auxMethod to override the default behavior and called in your ionViewDidLoad method.

import { Navbar } from 'ionic-angular'; import { ViewChild } from '@angular/core'; export class myCustomClass { @ViewChild(Navbar) navBar: Navbar; ionViewDidLoad() { this.setBackButtonAction() } //Method to override the default back button action setBackButtonAction(){ this.navBar.backButtonClick = () => { //Write here wherever you wanna do this.navCtrl.pop() } } } 

This code has been tested in ionic 3.

Answer 2

You can try the ionViewCanLeave or ionViewWillLeave event.

See this question No. 9533 with a proposal to allocate vacation events for “reverse” navigation. This may be convenient for your use case after its implementation.

Answer 3

You just need to remove the current index from the ViewController stack

import {ViewController} of 'ionic-angular';

  constructor(public navCtrl: NavController, public viewCtrl: ViewController) { } this.navCtrl.push("APage").then(() => { const index = this.viewCtrl.index; this.navCtrl.remove(index,1); });