How to Add a Back Button to Close the App in Ionic

When building mobile applications using frameworks like Ionic, providing a seamless user experience is crucial. One essential feature that every app should have is a back button that allows the user to exit the application. For Android apps, users expect that pressing the physical back button will either navigate them through the app's page history or exit the app if they are on the home or root page.

In this blog post, I’ll show you how to implement a back button feature in Ionic that will close the app if the user presses the back button on the root page.

Prerequisites

Before getting started, ensure that you have the following installed:

• Node.js (LTS version) – Download Node.js
• Ionic CLI – Install via npm ( npm install -g @ionic/cli )
• Capacitor – Install capacitor

Handling the Back Button Event

In your Ionic Angular app, the back button behavior is handled by the Ionic Platform service. You need to listen for the back button event and perform the necessary actions, such as navigating back in the app or closing it.

To do this, open the app.component.ts file and make the necessary changes.

import { Component } from '@angular/core';
import { AlertController, Platform, NavController } from '@ionic/angular';
import { Router } from '@angular/router';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { App } from '@capacitor/app';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  standalone: true,
  imports: [IonApp, IonRouterOutlet, HttpClientModule],
})

export class AppComponent {
  constructor(
    private platform: Platform,
    private router: Router,
    private alertCtrl: AlertController,
    private navCtrl: NavController
  ) {
    this.platform.backButton.subscribeWithPriority(10, (res) => {
      if (this.router.url === '/login' || this.router.url === '/main/home') {
        this.showExitConfirm();
      } else if (window.location.pathname === '/page-name-to-navigate') {
        this.navCtrl.back();
      } else {
        this.navCtrl.back();
      }
    });
  }

  showExitConfirm() {             //It will show exit popup
    this.alertCtrl
      .create({
        header: 'Exit',
        message: 'Are You Sure ?',
        backdropDismiss: false,
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {},
          },
          {
            text: 'Ok',
            handler: () => {
              App.exitApp();
            },
          },
        ],
      })
      .then((alert) => {
        alert.present();
      });
  }
}

Conclusion

Implementing a back button to close the app in Ionic is simple but essential for providing a smooth user experience, especially for Android users. You can further customize the behavior based on your app’s structure, ensuring it feels intuitive for users. By following the steps in this guide, you’ll be able to manage hardware back button events and improve your app's functionality.