How to properly handle back button to a Modal on Ionic

Ionic Framework ionic-v3
1

In my application I open a modal and I put some values on it, and if it close, open up an alert to confirm the exit, and if clicked in ‘yes’ the user lost the data puted on the input fields, so when I press the device back button I want the same behavior.
I did a function close() on the modal, to be called when the user want to close the modal, and in app.component.ts, I used the platform.registerBackButtonAction method to register the callback that will be called every time the back button is clicked. But because the modal is opened using ‘ModalController’, I can’t check if I’m in the class of the modal. Someone have a solution?

This is my actual platform.registerBackButtonAction:

platform.registerBackButtonAction(() => {
				// get current active page
				let view = this.nav.getActive();
				let activeView: ViewController = view;

				if (activeView != null) {
					if (this.nav.canGoBack()) {
						this.nav.pop();
					} else if (typeof activeView.instance.close === 'function')
						activeView.instance.close();
				
				}
			});
2

Why not just show the confirmation stuff in your close() function?

3

this.platform.registerBackButtonAction(() => {
this.navCtrl.setRoot(YourPage);
});

4

This is probably overkill, but if you want extremely fine-grained control, you can create a BackButtonHandlerProvider with two main methods – setHandler and runHandler. Then each page calls setHandler in ionViewWillEnter(), and your registerBackButton calls runHandler. So every page could have a different back button handler function if you wanted.

5

I am also having this issue, but in my case the application closes before initiating the handler I set.

I.e I set that when I click the hardware back button, the app should show a confirmation alert before closing. But instead the app goes to background, when I re-open the app it then show me the confirmation alert.

Can some please help figure out whats wrong and I hope my explanations are clear enough

6

Most probably you don’t know, but you are hijacking this thread. Please create a new thread and post your question there.

7

I created a back button Service to share the information that the Modal is open to my app.component.ts.

export class BackbuttonServiceProvider {
  public active: boolean = false;

  constructor() {
    console.log('Hello BackbuttonServiceProvider Provider');
  }

  public setActive() {
    this.active = !this.active;
  }

  public isActive() {
    return this.active;
  }
}

When I open the modal, I change the value of active to true. And of course when I close() the modal I change the value too. Here is when I open

myModal.present().then(() => {
      this.backButton.setActive();
    });

Now in my app.component.ts I have the information that I’m in my modal

platform.registerBackButtonAction(() => {
				// get current active page
				let view = this.nav.getActive();
				let activeView: ViewController = view;
				
				if (backButton.isActive()) {
					console.log("In the modal");
					//callBack (close); need a way to call my function close()
				} else if (activeView != null) {
					if (this.nav.canGoBack()) {
						this.nav.pop();
					}
				}
			});

The doubt is: How I will call the function close of my modal from the app.component.ts?