IONIC 4 Modal Not show

Hello I have this code to show a modal

app.module.ts

import { NgModule, ErrorHandler } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouterModule, RouteReuseStrategy, Routes } from ‘@angular/router’;
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;
import { IonicStorageModule } from ‘@ionic/storage’;

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’;

// MODALS ********************
import { MdlEscuelasPageModule } from ‘./Modals/mdl-escuelas/mdl-escuelas.module’;

// FIREBASE *****************
import { AngularFireModule } from ‘angularfire2’;
import { AngularFirestoreModule } from ‘angularfire2/firestore’;
import { AngularFireAuthModule } from ‘angularfire2/auth’;
import { firebaseConfig } from ‘./credentials’;

@NgModule({
declarations: [
AppComponent,
],
entryComponents: [
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MdlEscuelasPageModule,
IonicStorageModule.forRoot(),
IonicModule.forRoot(),
AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
AngularFireAuthModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {}

in the page that I will trigger the Modal I Imported this

page1.ts

import { MdlEscuelasPage } from ‘…/…/…/Modals/mdl-escuelas/mdl-escuelas.page’;

of course, I imported the Modal controller and inject in a constructor.

then

async ModalEscuelas(){
    console.log('ModalEscualas');
    const modal = await this.modalCtrl.create({
        component: MdlEscuelasPage,
        componentProps: { value: 123 }
    });
    return await modal.present();       
}

When I run the app and I click to show the modal does not show anything, I know is load because in console show the console.log(this.value); console.log(‘ionViewDidEnter’) but does not show the modal

Any Ideas?
Help please

do you need to return the present() method? i think it should work just as

await modal.present();

Is returned.

async ModalEscuelas(){
console.log(‘ModalEscualas’);
const modal = await this.modalCtrl.create({
component: MdlEscuelasPage,
componentProps: { value: 123 }
});
return await modal.present();
}

If that could help, I wrote a tutorial about how to use modals in v4. Maybe give a try to compare and you will notice a difference

Sorry but I did not Undestand the tutorial.

Don’t know neither what’s ur modal’s problem sorry

You could try wrapping the inside of your method in a try/catch block and log any async errors

async ModalEscuelas(){
    try {
        console.log('ModalEscualas');
        const modal = await this.modalCtrl.create({
            component: MdlEscuelasPage,
            componentProps: { value: 123 }
        });
        return await modal.present();       
    }
    catch(e) { 
        console.log(e);
    }
}

1 Like

Nop
Aparrently run because in console, show me the console.log that enter to the modal page, but dont show the modal

If I understand to create the modal are the next steps
1- Create a page that will be the modals with the next command : Ionic g page Modals/ModalName

2- In app.module.ts import the modal module with
import { MdlEscuelasPageModule } from ‘./Modals/mdl-escuelas/mdl-escuelas.module’;
and inserts in the imports section
3- In the page that I will call the modal I import the modal page :
import { MdlEscuelasPage } from ‘…/…/…/Modals/mdl-escuelas/mdl-escuelas.page’;

4- to call the modal when click some control
async ModalEscuelas(){
… try {
… … console.log(‘ModalEscualas’);
… … const modal = await this.modalCtrl.create({
… … … component: MdlEscuelasPage,
… … … componentProps: { value: 123 }
… … });
… … return await modal.present();
… }
… catch(e) {
… …console.log(e);
… }
}

I dont know what miss

Does the MdlEscuelasPageModule have the MdlEscuelasPage in the entryComponents array?

Like this?

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { FormsModule } from ‘@angular/forms’;
import { Routes, RouterModule } from ‘@angular/router’;

import { IonicModule } from ‘@ionic/angular’;

import { MdlEscuelasPage } from ‘./mdl-escuelas.page’;

const routes: Routes = [
… … {
… …path: ‘’,
… …component: MdlEscuelasPage
… }
…];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MdlEscuelasPage]
})
export class MdlEscuelasPageModule {}

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MdlEscuelasPage],
entryComponents: [MdlEscuelasPage]   /** <- ADD THIS **/ 
})
export class MdlEscuelasPageModule {}

Does not work :frowning:

can you also try adding: exports: [ MdlEscuelasPage ]

also make sure you restart your $ ionic s

I did notice that combining bootstrap (plain-vanilla) with this modal does hide the modal. I have not tried to counter this. I was not too dependant on bootstrap so I just removed it.

5 Likes

Do you have any update on this?

Just add the following to your global scss :
.modal {
display: flex !important;
}

Styles of bootstrap 4 have the definition of .modal class and turns display to none by default;

6 Likes

thanks @NikolaySh, this helps me :slight_smile:

Thanks !!
i don’t remove bootstrap & ng-bootstrap !!

Thank you so much it solved my problem :slight_smile:

The new modal/popover usage is very unintuitive. I just can’t get a Modal to show in my components. It went from easy to use, to convoluted. Bleh. :frowning: