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();
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.
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 
thanks to all
5 Likes
Oh, I’m going to test it in my app. Thanks for sharing!
1 Like
Works for me too!
1 Like
nice, can you mark it as a solution? 
How do I do that? (I’m very new at this forum)
I have written code in same way but still getting same error
1 Like
You can use the getTop() method in the modal controller to check for an overlay, and then if there is, call dismiss()
1 Like
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>
1 Like
It’s ridiculous how this was the problem for my for a while. Thanks!