Run a command to engage with the user and then display a new page

Question

Run a command to engage with the user and then display a new page

Currently, I'm exploring the documentation in search of a solution for the following scenario:

Imagine the user is on a form page and decides to go back. I want to prompt a verification message like

"Are you sure you want to discard your changes?"

. Depending on whether they click yes or no, a function will be executed before leaving the page.

I am aware that I can utilize

Platform.registerBackButtonAction()

to monitor when the hardware back button is clicked. However, how can I achieve similar functionality for the NavController back button located in the header?

While NavGuards are automatically integrated with the NavController back button, they execute the function after leaving the page, which does not align with my requirements.

Essentially, the desired flow is as follows:

Enter the page >> Enter information in any input field >> If attempting to leave the page, trigger a prompt alert >> Upon clicking 'yes', exit the page

Below is a snippet of the code I have been working on:

ionViewCanLeave() {
    let confirmationAlert = this.alerts.create({
        title: "Confirmation Message",
        buttons: [{
            text: 'Cancel',
            handler: () => {
                this.navCtrl.pop();
            }
        }, {
            text: 'Yes',
            handler: () => {
                this.saveDescription();
            }
        }]
    });

    if (this.changes != undefined && this.changes!= '') { 
        confirmationAlert.present();
    } else {
        this.navCtrl.pop(); 
    }
}

How can I implement this functionality? Is there a way to prevent users from leaving the view, perform an action, and based on the outcome, decide whether to exit?

Thank you :)

angular typescript ionic-framework ionic2

Answer 1

Answer №1

How about trying something like this?

function myFunction(): void {
    // This function modifies the input
    // ...
    this.displayAlert = true;
}

ionViewCanLeave() {
    if(this.displayAlert) {
        let alertBox = this.alertCtrl.create({
            title: 'Exit',
            message: 'Are you sure you want to leave?',
            buttons: [{
                    text: 'Exit',
                    handler: () => {
                        alertBox.dismiss().then(() => {
                            this.leavePage();
                        });         
                    }
                },
                {
                    text: 'Stay',
                    handler: () => {
                        // Do something in case the user decides to stay?
                    }
                }]
        });

        // Display the alert box
        alertBox.present();

        // Return false to prevent the page from being popped up
        return false;
    }

    return true;
}

private leavePage() {
    this.displayAlert = false;
    this.navCtrl.pop();
}

If the page was set as root, you can replace this.navCtrl.pop(); with

this.navCtrl.setRoot(anotherPage);

Answer 2

How about trying something like this?

function myFunction(): void {
    // This function modifies the input
    // ...
    this.displayAlert = true;
}

ionViewCanLeave() {
    if(this.displayAlert) {
        let alertBox = this.alertCtrl.create({
            title: 'Exit',
            message: 'Are you sure you want to leave?',
            buttons: [{
                    text: 'Exit',
                    handler: () => {
                        alertBox.dismiss().then(() => {
                            this.leavePage();
                        });         
                    }
                },
                {
                    text: 'Stay',
                    handler: () => {
                        // Do something in case the user decides to stay?
                    }
                }]
        });

        // Display the alert box
        alertBox.present();

        // Return false to prevent the page from being popped up
        return false;
    }

    return true;
}

private leavePage() {
    this.displayAlert = false;
    this.navCtrl.pop();
}

If the page was set as root, you can replace this.navCtrl.pop(); with

this.navCtrl.setRoot(anotherPage);

Answer 3

Answer №2

According to the official documentation, you can implement it in the following way:

ionViewCanEnter(): boolean{
   // This is where we decide whether to allow entry into this view
   // Return true if randomValue is valid, false otherwise
   if(isValid(randomValue)){
      return true;
    } else {
      return false;
    }
  }

Answer 4

According to the official documentation, you can implement it in the following way:

ionViewCanEnter(): boolean{
   // This is where we decide whether to allow entry into this view
   // Return true if randomValue is valid, false otherwise
   if(isValid(randomValue)){
      return true;
    } else {
      return false;
    }
  }

Run a command to engage with the user and then display a new page

Answer №1

Answer №2

Similar questions

The type 'Promise<void>' is lacking the properties that are required by the type

Experiencing CORS problem on Angular asp.net core application running on a local Mac OS machine

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

Adjusting the alignment of button text in an Angular Kendo grid

Can optional parameters be used to restrict TypeScript overloads in any way?

Continuously apply the template in a recursive manner in Angular 2 without reintroducing any duplicated components

Encountered an issue with the Dynamic Form: TypeError - The property 'value' is undefined and cannot be read

Using the useStaticQuery hook outside of a function component is not allowed and will result in an invalid hook call error. Remember to only call

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

steps for setting up firestore database

An unexpected 'foo' key was discovered in the current state being processed by the reducer when using redux-toolkit's configure store and a customized store enhancer

Checking the next route in Angular 2 when navigating away

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

Incorporating an array of objects into another array of objects in Angular2 and Typescript, focusing on specific object fields

IntelliJ IDEA mistakenly believes that the MouseEvent interface has already been declared

Ionic 5 navigation problem: No routes were found

The functionality of Flowbite Drawer is disabled when used within an ngFor loop in Angular

Creating two separate Angular modules locally can be accomplished by first developing Module B and ensuring it is imported in

Angular Fails to Identify Chart.js Plugin as an Options Attribute

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my