Problems to close modal Ionic 4

Hello
I’m having trouble closing a modal

I am making use of the documentation of ionic 4

Can you post the problematic code?

I think there is no problem in the code.

home.page.ts

import {Component} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { CrearComandaPage } from './../crear-comanda/crear-comanda.page';

// servicios
import { ComandasService } from './../services/comandas.service';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    fecha: any;

    constructor(private servicioComanda: ComandasService, public modalCtrl: ModalController) {

    }

    async crearComanda() {

        const modal = await this.modalCtrl.create({
            component: CrearComandaPage,

        });

        return await modal.present();
    }

}

crear-comanda.page.ts

import { Component, OnInit} from '@angular/core';
import { ComandasService } from './../services/comandas.service';
import { ModalController } from '@ionic/angular';

@Component({
    selector: 'app-crear-comanda',
    templateUrl: './crear-comanda.page.html',
    styleUrls: ['./crear-comanda.page.scss'],
})
export class CrearComandaPage implements OnInit {

    constructor(private comandaServicio: ComandasService, public modalCtrl: ModalController) {}

    ngOnInit() {}

    cerrar() {

        this.modalCtrl.dismiss();
    }

}

crear-comanda.page.html

input

<ion-button color="primary" expand="full" (click)="cerrar()"> asd</ion-button>

the modal is presented but when closing it throws the error

I see absolutely nothing wrong with this, but it does not work

Are you on the latest version, rc.0?

You could try, in the modal cmp:

const modal = await this.modalCtrl.getTop();
modal.dismiss();

this also probes and throws the following error

I have the version of ionic 4.6.0, I do not know if it is necessary to update something additional? the CLI or some other dependency?

Hi! I have the same problem than you…

… Still investigating!

I did everything they said in this post but I still have the same problem, and I do not think that adding the modal module to the app module will correct this, in ionic 3 it was not like that !!

i have this @jjdev

Ionic:

ionic (Ionic CLI) : 4.6.0 (C:\Users\Propietario\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)

System:

NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
npm : 6.5.0
OS : Windows 10

use ViewController to dismiss modal
this.view.dismiss();

@Rupnesh

in ionic 4 the viewController is no longer used for this case, now the modalController is used

@danielchirinos
it seems like,I am still not upgraded to Ionic 4, so no comments.:slightly_smiling_face:

He solved the problem, I leave the code for anyone who has the same problem

steep 1
I created the modal as a page

steep 2
app.module.ts

I have added in the entryComponent the page of the modal and in turn the module to the imports

import { ModalPage } from './pages/modal/modal.page';
import { ModalPageModule } from './pages/modal/modal.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [ModalPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    ModalPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

steep 3
app-routin.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

only the real pages should remain, for example home which is the home page

steep 4
home.page.ts

function to open the modal

import {Component} from '@angular/core';
import { ModalController } from '@ionic/angular';

import { ModalPage } from './../pages/modal/modal.page';
@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    constructor(private modalController: ModalController) {}

    async abrirModal() {
        const modal = await this.modalController.create({
            component: ModalPage
        });

        modal.present();
    }

}

steep 5
home.page.html

<ion-button color="primary" expand="full" (click)="abrirModal()">Abrir modal  </ion-button>

steep 6
function to close o dismiss the modal in modal.page.ts

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  cerrar() {
    this.modalController.dismiss();
  }

}

steep 7
modal.page.html

<ion-button color="primary" (click)="cerrar()">cerrar  </ion-button>

and I’ve managed to make it work :slight_smile: thanks to all

3 Likes

Oh, I’m going to test it in my app. Thanks for sharing!

1 Like

Works for me too! :slight_smile:

1 Like

nice, can you mark it as a solution? :grinning:

How do I do that? (I’m very new at this forum)

I have written code in same way but still getting same error
image

You can use the getTop() method in the modal controller to check for an overlay, and then if there is, call dismiss()

For anyone having issues calling the function itself to close the modal in Ionic 4, instead of calling onclick="dismiss()", you must call (click)="dismiss()" on the close button.

So it would look like this,

<ion-button (click)="dismiss()">Close</ion-button>

NOT THIS

<ion-button onclick="dismiss()">Close</ion-button>