How to open a modal in ionic 5? - ionic-framework

Question

I want to open a modal in ionic 5. But somehow I can't find the component.module.ts file where I can export the modals/componets that I want to use. Did they change that system, how is it done with ionic 5? Do you know a piece of documentation for that? The whole system seems to have changed like there is always a page-routing.module.ts. in every page file.

Answer 1

There is nothing new changes for opening modal.
Add modalPage or modalComponent to app.module.ts [ Or Home.module.ts if lazy-loaded ] in entryComponents and declarations
app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { FolderPageRoutingModule } from './folder-routing.module';
import { FolderPage } from './folder.page'; //from where you open
import { ModalPage } from '../modal/modal.page';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
FolderPageRoutingModule
],
declarations: [ModalPage],
entryComponents: [ModalPage] //modal page
})
export class FolderPageModule {}
and open you modal from corresponding page.
async presentModal() {
const modal = await this.modalController.create({
component: ModelComponent,
componentProps: { value: 123 }
});
await modal.present();
}
Hope this help.