How can I change the back button text and click action for a specific page in IONIC 2+?

Question

I have found that many solutions are only answered in parts and though it might be useful to combine two solutions into one answer relating to the question asked above: "How can I change the back button text and click action for a specific page in IONIC 2+?"

Answer 1

This question was answered elsewhere but in many different parts meaning they only covered "changing the text" or showing how to perform a "custom click action" for the back button using various solutions. This answer is primarily to combine the two to showcase the most simple solution. This solution also includes the physical back button of devices like Android and Windows based phones. iPhones doesn't have a back button.

Each file will be displayed below in full to help junior developers see the fuller picture.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, Navbar, NavController, AlertController } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { SitesPage } from '../pages/sites/sites';
import { NavigationProvider } from '../providers/navigation/navigation';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DashboardPage,
    SitesPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DashboardPage,
    SitesPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    NavigationProvider
  ]
})
export class AppModule {}

src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NavigationProvider } from '../providers/navigation/navigation';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;


  constructor(private platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navProvider: NavigationProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      platform.registerBackButtonAction(() => {
        this.navProvider.backButtonAction();
      });

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

src/pages/dashboard/dashboard.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, Navbar } from 'ionic-angular';
import { SitesPage } from '../sites/sites';
import { NavigationProvider } from '../../providers/navigation/navigation';

@IonicPage()
@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage {
  @ViewChild(Navbar) navBar: Navbar;

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public navProvider: NavigationProvider) {}

  ionViewDidLoad() {
    this.viewCtrl.setBackButtonText('Logout');

    this.navBar.backButtonClick = () => {
      this.navProvider.backButtonAction();
    };
  }

  sites() {
    this.navCtrl.push(SitesPage);
  }
}

src/providers/navigation/navigation.ts

import { Injectable } from '@angular/core';
import { Platform, NavController, AlertController } from 'ionic-angular';
import { App } from "ionic-angular/index";

@Injectable()
export class NavigationProvider {

  logoutAlert: any = null;
  exitAppAlert: any = null;
  private navCtrl: NavController;

  constructor(private platform: Platform, private app: App, private alertCtrl: AlertController) {
    //get the nav controller which is only ready when the platform is ready
    platform.ready().then(() => {
      this.navCtrl = app.getActiveNavs()[0];
    });
  }

  //* perform the back button action
  backButtonAction() {
    // can we pop this page?
    if(this.navCtrl.canGoBack()) {
      // are we on the page that we want to trigger the logout alert?
      const view = this.navCtrl.getActive();
      if(view.component.name == 'DashboardPage') {
        // is the logout alert still visible?
        if(this.logoutAlert) {
          // dismiss it instead :)
          this.logoutAlert.dismiss();
          this.logoutAlert = null;
        } else {
          // show the logout alert 
          this.logoutAlertAction();
        }
      } else {
        //pop the page to perform default back action
        this.navCtrl.pop();
      }
    } else {
      // we are at the root page so the next step is to exit the app
      // is the exit app alert still visible?
      if(this.exitAppAlert) {
        // dismiss it instead :)
        this.exitAppAlert.dismiss();
        this.exitAppAlert = null;
      } else {
        this.exitAppAlertAction();
      }
    }
  }
  //*/

  //* prompt the user before logging out
  logoutAlertAction() {
    this.logoutAlert = this.alertCtrl.create({
      title: 'Logout',
      message: 'Are you sure you want to log out?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // don't do anything
          }
        },
        {
          text: 'Yes',
          handler: () => {
            // clear sessions or do something to log the user out before popping the page
            this.navCtrl.pop();
          }
        }
      ]
    });
    this.logoutAlert.present();
  }
  //*/

  //* prompt the user before exiting the application
  exitAppAlertAction() {
    this.exitAppAlert = this.alertCtrl.create({
      title: 'Exit Application',
      message: 'Are you sure you want to exit the app?',
      buttons: [
        {
          text: 'Yes',
          handler: () => {
            // exit the application
            this.platform.exitApp();
          }
        }, 
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // don't do anything
            this.exitAppAlert = null;
          }
        }
      ]
    });
    this.exitAppAlert.present();
  }
  //*/
}