How To Make A Modal In Ionic 4 2021 | Easy Steps

Here are the simple steps to  create a Modal

Step 1

Generate component by this cmd

ionic g c popup

In ionic 3 we generate the page and used that as a modal but in ionic 4 we should create a component by above command and use it as a modal.

Step 2

Changes in homepage.ts file ( the page where the popup will show)

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { PopupComponent } from '../popup/popup.component';


//// export

export class HomePage implements OnInit {

constructor(public modalController: ModalController) { }

// add PopupComponent

async optionModal() {
const modal = await this.modalController.create({
component: PopupComponent,
cssClass: 'option_modal',
});

return await modal.present();
}
ngOnInit() {
}

}

Step 3

#############  popup page ( popup page that will show on homepage as a modal) #############

/// popup.component.ts

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

export class PopupComponent implements OnInit {

constructor(private modalController: ModalController) {
}

ngOnInit() { }

// close modal
async closeModal() {
await this.modalController.dismiss();
}


}

Step 4

############# app. module.ts#############

/// import that componenet (PopupComponent this is my component)

import { PopupComponent } from './popup/popup.component';

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