how to close all ionic 2 modals?

ionic 4 modal close button
modal ion
ionic modal on click
ion modal overlay
ionic filter modal
modal header ionic
ionic 4 modal backdrop
ion modal react

I need to close all current modal popups and log out the user in ionic 2 application when the device goes to idle.

I used following methods to close popups in the home component.

this.viewController.dismiss().then(_ => {
  console.log("modal dismiss");
}).catch(error => {


this.navController.popAll().then(_ => {
  console.log("modal dismiss");
}).catch(error => {

But it throws following error You can't remove all pages in the navigation stack. nav.pop() is probably called too many times.

and does not close any popup. Anyone knows how to do it?

viewController.dismiss() only closes the current Modal. Meaning you will have to keep a reference to all open modals in and call dismiss() on each one.

You can set use navController.setRoot(LoginPage) (link) to show the login-page.

How to close all modals - ionic-v3, hi guys, i want close all modals behind the top modal with dismiss. how i can do. ChrisGriiffith April 17, 2019, 4:24pm #2. You have to keep the  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.

This worked for me

  constructor(public navCtrl: NavController,public ionicApp: IonicApp){} 

  let activePortal = this.ionicApp._modalPortal.getActive()
  if (activePortal) {
    activePortal.dismiss(); //can use another .then here

popToRoot does not close modals · Issue #11849 · ionic-team/ionic , Cordova CLI: 6.4.0 Ionic Framework Version: 3.3.0 Ionic CLI Version: So how would I go about closing all modals/popovers/overlays from an  Handling the hardware back button using Angular is easy, Ionic does all the job by dispatching an event ionBackButton (which bubbles through the document) when the “physical” button is clicked. We just have to listen to that event and then close our modal if something is happening using the ModalController as we would do, if we would manually close the modal.

We can create a recursive function which takes a current active modal reference and dismiss that modal after that we will call on the that function again in dismiss() event. Here is the code ,

recursive function

public dismissAllModal () {
        let activeModal = this.ionicApp._modalPortal.getActive();
        if (activeModal) {
            activeModal.dismiss().then(() => {

Call the function where we should remove all modals (I placed in login page in constructor)

this.viewCtrl.dismiss().then(_ => {

[ionic v4] can't dismiss modal from current modal page component , Bug Report Ionic Info Ionic: ionic (Ionic CLI) : 4.0.5 (/usr/local/lib/node_modules/​ionic) Ionic Framework : @ionic/angular 4.0.0-beta.2 @angular-devkit/core @​peterpeterparker @cvaliere Thanks you all guys, i will cose this  Ionic v1 close all opened modals. that is used inside many different ionic modals. That function switches states, and when it switches I want to close the

ModalController - Ionic API Documentation, () call accepts an optional parameter that will be passed to the callback described as follows. Mix Play all Mix - Ionic YouTube World's Most Famous Hacker Kevin Mitnick & KnowBe4's Stu Sjouwerman Opening Keynote - Duration: 36:30. Cyber Investing Summit Recommended for you

PopoverController - Ionic API Documentation, January 26th 2018 Ionic 2/3. There are The former will only close the specific instance, while the latter will close all currently opened instances. However, it's  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.

Modals in Ionic 2 ←, Understanding how to use Ionic 5/4 modals. First of all, We need to mention that we are using the Ionic CLI 5 so if you didn't yet upgrade Then open the src/​pages/modal/modal.html file and add a button to close the modal:. In this tutorial, you will learn, how to utilize the Ionic 4 modal component from scratch. I personally feel the Ionic 4 lacks documentation when compared to its previous versions. The prime aim of this tutorial is, to explain 1. How to create a modal in Ionic 4. 2. How to close the modal in Ionic 4. 3. How to pass data to a modal in Ionic 4. 4.

  • Is there any other way of doing it rather than forcefully setting a root page. Can we just dismiss all modals using some shared service or something like that? @robbannn