Problems to close modal Ionic 4

#1

Hello
I’m having trouble closing a modal

I am making use of the documentation of ionic 4

#2

Can you post the problematic code?

#3

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

#4

Are you on the latest version, rc.0?

You could try, in the modal cmp:

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

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?

#6

Hi! I have the same problem than you…

… Still investigating!

#7

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 !!

#8

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

#9

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

#10

@Rupnesh

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

#11

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

#12

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

2 Likes
#13

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

1 Like
#14

Works for me too! :slight_smile:

1 Like
#15

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

#16

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

#17

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

#18

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