Triggering Backbutton actions in Ionic 3Just a heads-up

Question

Triggering Backbutton actions in Ionic 3Just a heads-up

I need to capture the back button event before it triggers. Once the listener is activated, the back signal has already been sent.

This is my approach so far:

 document.addEventListener("backbutton", () => {
       console.log("[WARN] Back button pressed");
       console.log("Textbox value: " + this.inputValue);
       this.showConfirm();
       document.removeEventListener("backbutton");
     });

I don't want to lose the value of "this.inputValue". Unfortunately, in most cases, it's already lost by the time the event is triggered.

typescript ionic-framework ionic3

Answer 1

Answer №1

One of the requirements is to display an alert when leaving a particular page.

To achieve this, you can make use of NavGuards:

There are instances where developers need control over views entering and exiting. To facilitate this, NavController provides the methods ionViewCanEnter and ionViewCanLeave. These functions bear resemblance to Angular route guards but are better integrated with NavController.

// ...

ionViewCanLeave() {

if(this.inputValue) {
// Display the alert
this.presentConfirm();
}

// Page will be left if inputValue is null
return this.inputValue === null;
}

presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Exit',
message: 'Do you want to exit?',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Exit',
handler: () => {

// Allow user to exit from current page
this.inputValue = null;

// Navigate back to previous page
setTimeout(() => { this.navCtrl.pop(); }, 500);

}
}
]
});
alert.present();
}

Answer 2

One of the requirements is to display an alert when leaving a particular page.

To achieve this, you can make use of NavGuards:

There are instances where developers need control over views entering and exiting. To facilitate this, NavController provides the methods ionViewCanEnter and ionViewCanLeave. These functions bear resemblance to Angular route guards but are better integrated with NavController.

// ...

ionViewCanLeave() {

if(this.inputValue) {
// Display the alert
this.presentConfirm();
}

// Page will be left if inputValue is null
return this.inputValue === null;
}

presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Exit',
message: 'Do you want to exit?',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Exit',
handler: () => {

// Allow user to exit from current page
this.inputValue = null;

// Navigate back to previous page
setTimeout(() => { this.navCtrl.pop(); }, 500);

}
}
]
});
alert.present();
}

Answer 3

Answer №2

Here is the method I used to customize the Back Button functionality:

constructor(public plt: Platform) {
    //Catch BackBTN Event
        plt.ready().then( ()=> {
          plt.registerBackButtonAction( ()=> {
            this.showConfirm();
          })
        });
}

showConfirm() {
      let confirm = this.alertCtrl.create({
        title: this.confirm,
        message: this.confirm_msg,
        buttons: [
          {
            text: this.disagree,
            handler: () => {
              console.log("Saved changes");
              this.dismiss();
            }
          },
          {
            text: this.agree,
            handler: () => {
              console.log("Discard changes");
              this.viewCtrl.dismiss();
            }
          }
        ]
      });
      confirm.present();
    }
  }

This approach allows me to define a custom method for handling the Back Button.

Answer 4

Here is the method I used to customize the Back Button functionality:

constructor(public plt: Platform) {
    //Catch BackBTN Event
        plt.ready().then( ()=> {
          plt.registerBackButtonAction( ()=> {
            this.showConfirm();
          })
        });
}

showConfirm() {
      let confirm = this.alertCtrl.create({
        title: this.confirm,
        message: this.confirm_msg,
        buttons: [
          {
            text: this.disagree,
            handler: () => {
              console.log("Saved changes");
              this.dismiss();
            }
          },
          {
            text: this.agree,
            handler: () => {
              console.log("Discard changes");
              this.viewCtrl.dismiss();
            }
          }
        ]
      });
      confirm.present();
    }
  }

This approach allows me to define a custom method for handling the Back Button.

Triggering Backbutton actions in Ionic 3Just a heads-up

Answer №1

Answer №2

Similar questions

Guide to retrieving specific information from a JSON file in an Angular application

Switch button - reveal/conceal details

What is the best way to implement pipes and incorporate reusable action buttons in a Mat-table component for maximum reusability?

The issue of updating a GLSL uniform variable during an animation in three.js using TypeScript remains unresolved

I am having trouble getting Angular 6 to work with lowdb

Every time I attempt to submit the login form on the Ionic and Angular page, instead of capturing the values of the form group, the page simply refreshes

Creating a customized Axios instance in Typescript can provide more flexibility and control over

What is causing the error message "may require a suitable loader" to appear when I add my TypeScript Node module to my Next.js application?

Implementing automatic selection for MUI toggle buttons with dynamic data

Creating a canvas that adjusts proportionally to different screen sizes

Changing the font family for a single element in Next.js

Sorting data by percentages in AngularJS

Navigating through different components within a single page

The contents table remains fixed in the top right corner as you scroll

Utilizing the dialogue feature within Angular 6

Tips on creating a hierarchical ul list from a one-dimensional array of objects

Issues with using a personalized font in a Stenciljs project

Ionic 3 Storage Timing Explained

Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Using ng-repeat with an AJAX-called JSON is not possible