Ionic 3 : Close modal with phone's back button

ionic 4 modal back button
close modal on back button angular 6
ionic 4 hardware back button
ionic back button event
ionic 4 back button exit app
ionic 4 back button issue
this ionicapp _modalportal getactive
property exitapp does not exist on type platform

I try to override the phone's back button in my Ionic App.

This code permit me to open a modal to close the App if I'm not in a page, else close the page.

But this doesn't allow me to close an opened modal. How can I detect if I'm in a modal to close it ?

platform.registerBackButtonAction(() => {

      let nav = app.getActiveNav();
      let activeView: ViewController = nav.getActive();
      console.log(activeView);

      if(activeView != null){
        if(nav.canGoBack()) {
          activeView.dismiss();
        } else{
          let alert = this.alertCtrl.create({
            title: this.pdataManager.translate.get("close-app"),
            message: this.pdataManager.translate.get("sure-want-leave"),
            buttons: [
              {
                text: this.pdataManager.translate.get("no"),
                handler: () => {
                  this.presentedAlert = false;
                },
                role: 'cancel',
              },
              {
                text: this.pdataManager.translate.get("yes"),
                handler: () => {
                  this.presentedAlert = false;
                  this.platform.exitApp();
                }
              }
            ]
          });
          if(!this.presentedAlert) {
            alert.present();
            this.presentedAlert = true;
          }
        }
      }
    });
  }

You can give page name to your modal and you can access it from anywhere in app. Try this..

import { App } from 'ionic-angular';

    constructor(public app: App){

    }

        platform.registerBackButtonAction(() => {

              let nav = this.app.getActiveNav();
              let view = nav.getActive().instance.pageName;


              if (view == YOU_PAGE_NAME) {
                //You are in modal
              } else {
                //You are not in modal
              }
        });

Inside your modal

pageName = 'YOU_PAGE_NAME';

Modals in Ionic 2 ← Alligator.io, Build amazing mobile, web, and desktop apps all with one shared code base and nightly, 3.9.2 (latest), 3.8.0 · 3.7.1 · 3.7.0 · 3.6.1 · 3.6.0 · 3.5.3 · 3.5.0 · 3.4.2 · 3.4.​0 A modal uses the NavController to present itself in the root nav stack. can later be closed or "dismissed" by using the ViewController's dismiss method. I hope it is running well to your side too. If not then please check for the issues. Now let’s move on to the issues of modal in ionic 3 which are faced by many developers. Learn more: Implement Infinite scroll in ionic 3 app. Commonly faced issues of modal in ionic 3: 1.Error: ionic modal doesn’t return the data. Solution:

1.Import IonicApp:

import {IonicApp } from 'ionic-angular';

2.Add to your constructor:

  private ionicApp: IonicApp

3.Inside your platform.registerBackButtonAction add:

let activeModal=this.ionicApp._modalPortal.getActive();
if(activeModal){
     activePortal.dismiss();
      return;
   }

I found the answer here : https://github.com/ionic-team/ionic/issues/6982

ModalController - Ionic API Documentation, How to close an modal page from app.component.ts class using nav controller? I was trying Ionic 3 : Close modal with phone's back button. Modals in Ionic 2. Modals are an easy way to present options to the user or allow editing of certain settings. In Ionic, modals are just regular pages that get called with a ModalController. They appear on top of the page stack, but they don’t get a back button. When a modal gets dismissed it’s completely destroyed.

In the end I have this for my back button:

constructor(private platform: Platform, private config: ConfigService, private nfc: NfcService, private alertCtrl: AlertController,
      public events: Events, private translate: TranslateService, private fetch: ConfigFetchService, private menuList: MenuList, private ionicApp: IonicApp,
      private menuCtrl: MenuController
   ) {
      platform.ready().then(() => {
         this.config.pullVersion();
         let ready = true;

         platform.registerBackButtonAction(() => {
            Logger.log("Back button action called");

            let activePortal = ionicApp._loadingPortal.getActive() ||
               ionicApp._modalPortal.getActive() ||
               ionicApp._toastPortal.getActive() ||
               ionicApp._overlayPortal.getActive();

            if (activePortal) {
               ready = false;
               activePortal.dismiss();
               activePortal.onDidDismiss(() => { ready = true; });

               Logger.log("handled with portal");
               return;
            }

            if (menuCtrl.isOpen()) {
               menuCtrl.close();

               Logger.log("closing menu");
               return;
            }

            let view = this.nav.getActive();
            let page = view ? this.nav.getActive().instance : null;

            if (page && page.isRootPage) {
               Logger.log("Handling back button on a home page");
               this.alertCtrl.create({
                  title: translate.instant('Confirmation'),
                  message: translate.instant('Do you want to exit?'),
                  buttons: [
                     {
                        text: translate.instant('Cancel'),
                        handler: () => {
                        }
                     },
                     {
                        text: translate.instant('OK'),
                        handler: () => {
                           platform.exitApp();
                        }
                     }
                  ]
               }).present();
            }
            else if (this.nav.canGoBack() || view && view.isOverlay
            ) {
               Logger.log("popping back");
               this.nav.pop();
            }
            else if (localStorage.getItem('is_logged_in')
            ) {
               Logger.log("Returning to home page");
               this.nav.setRoot(HomePage);
            }
            else if (!localStorage.getItem('is_logged_in')) {
               Logger.log("Not yet logged in... exiting");
               platform.exitApp();
            }
            else {
               Logger.log("ERROR with back button handling");
            }

         }, 1);

....

How to close modal page from app.component.ts? - ionic-v3, How to close Ionic modals using the hardware back button. David Dal Busco. Follow. May 6, 2019 · 3 min read. I noticed today that I'm always We just have to listen to that event and then close our modal if something is happening using the  ModalController Improve this doc A Modal is a content pane that goes over the user's current page. Usually it is used for making a choice or editing an item. A modal uses the NavController to present itself in the root nav stack. It is added to the stack similar to how NavController.push works.

How to close Ionic modals using the hardware back button, Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.​com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x I'm submitting a . Ionic makes building cross-platform mobile apps enjoyable. It's integration with Angular is seemless, so it's easily become our go-to for mobile. Ionic is a shining example of a high-quality framework that takes advantage of Angular's power and flexibility, enabling developers to build production-ready mobile apps and Progressive Web Apps, in a

Close modal using back button (especially on PWAs) · Issue #13964 , My Learn Ionic 3 From Scratch Course - https://www.udemy.com/learn-ionic-3-​from-scratch Duration: 11:32 Posted: Apr 26, 2017 Ionic 3 - Toasts In this video, we look at the ToastController within Ionic 3 to create toasts within our project(s). The extra epic content always comes via email first.

Ionic 3 - Modal Implementation, Course 3 of 5 in the Full Stack Web and Multiplatform Mobile App So the modal in Ionic supports this method called dismiss, which will allow us to dismiss the  In this tutorial, we are going to see how to use modals in Ionic 5/Angular apps by creating a simple demo app so let's get started! First of all, We need to mention that we are using the Ionic CLI 5 so if you didn't yet upgrade to this release make sure to use the equivalent commands for Ionic CLI prior versions.