How to add ionic back button

The ionic back button element allows us to navigates back to the previous page or exit in the app’s history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. We can also control mobile like Android device native back button.

In this articles, we’ll explore how to used ionic back button element with and without text and icon. We will add confirm button on exist Android application when we click on mobile device back button.

Setting up Ionic back button

With the release of ionic version 4, the Ionic framework no longer limited to angular. Ionic allows us to create ionic projects in different front-end frameworks like Angular, Vue, and React. Let first create a blank Ionic Angular project to demonstrate ionic back button.

ionic start backButtonApp blank --type=angular
ionic generate page about
ionic generate page contact

The above command will create an ionic project, add a new page about, contact, and set routing for us.

Ionic back button example

We can change and control what to display in the back button, we can use the text and icon properties. Here is a screenshot of the slot attribute used ionic back button. The slot can be left or right and by default, it is left.

Let add back button for about page template.

<ion-header>
  <ion-toolbar>
    <ion-title>About</ion-title>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Let add the slot right attribute for the contact page template.

<ion-header>
  <ion-toolbar>
    <ion-title>Contact Page</ion-title>
    <ion-buttons slot="end">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Ionic back button with text and icon

Ionic back button allow us to add our own icon image instead of default icon. Here in both our about and contact page we have add different icon and text in ionic back button. Here is screenshot of ionic back button custom icon and text.

We can see that we have a home icon undo and a home icon on the contact page. You can use an ionic icon for the icon of your choice.

Ionic back button defaultHref attribute

The ionic back button has defaultHref attribute that allows us to navigate to a specific page when there is no history of going back to the previous page. If we want to set the default to navigate the page to home, then we need to use defaultHref attribute in the Ionic back button. Here is the code to set default navigation to home.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="Home-page" icon="home" defaultHref="home">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Here we will learn how to handle the default mobile’s back button which allows us to popup to the parent page and allow us to exit from the application when there is nothing to pop up a page.

How to disabled hardware back button in Android

We will use @HostListener to listen to the Ionic back button event. To demonstrate how to disable the hardware back button on the specific page, let’s used @HostListener and add the following code in the about.page.ts file.

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.page.html',
  styleUrls: ['./about.page.scss'],
})
export class AboutPage  {

  constructor() { }

  @HostListener('document:ionBackButton', ['$event'])
  overrideHardwareBackAction(event: any) {
    event.detail.register(100, async () => {
      event.stopImmediatePropagation();
      event.stopPropagation();
      event.preventDefault();
    });
  }
}

How to add confirm alert on Ionic back button

We have used Cordova to perform confirm alert when exiting from the application using the hardware back button. For PWA you need to use the Ionic capacitor plugin to exit the application. Here is a screenshot of our confirm exit ion Android.

To use ionic splash and status bar in ionic Cordova Android, we need to install both splash and status bar by running the following command.

ionic cordova plugin add cordova-plugin-splashscreen
npm install @ionic-native/splash-screen

ionic cordova plugin add cordova-plugin-statusbar
npm install @ionic-native/status-bar --save

npm install --save @ionic-native/core

Now let’s edit the app.component.ts file to add confirm alert and when to exit our application.

import { Component } from '@angular/core';
import { Platform, AlertController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { Location } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,

    private location: Location,
    public alertCtrl: AlertController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });


    this.platform.backButton.subscribeWithPriority(10, (processNextHandler) => {
      if (this.location.isCurrentPathEqualTo('/home')) {
        this.confirmExitApp();
        processNextHandler();
      } else {
        this.location.back();
      }
    });

  }

  async confirmExitApp() {
    const alert = await this.alertCtrl.create({
      header: 'Confirmation Exit',
      message: 'Are you sure you want to exit ?',
      backdropDismiss: false,
      cssClass: 'confirm-exit-alert',
      buttons: [{
        text: 'Stay',
        role: 'cancel',
        handler: () => {
          console.log('Application exit  handler');
        }
      }, {
        text: 'Exit apps',
        handler: () => {
          navigator['app'].exitApp();
        }
      }]
    });

    await alert.present();
  }

}

Conclusion
In this article, we have explored how to use the ionic back button element in our application. Also, demonstrate how to use the ionic back button with icons and text. We have used how to add confirm from a user when we click a few times on the Android back button.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use ionic skeleton component.
• How to create a different ionic list.