Ionic Modal

The modal in Ionic is displayed as a temporary UI that slides into the screen. It appears on top of the app's content and must be dismissed by the app before resuming an interaction. It is mainly useful for login/sign-up page, composing messages, filtering items in a list, or presenting app configuration options.

Modal Controller

It is responsible for creating modal in the Ionic application. It uses create() method for creating modal. You can customize the controller by setting modal options in the create method.

Dismiss Method

After creating a modal, you can dismiss it by calling the dismiss() method on the modal controller. The onDidDismiss function can be called for performing additional actions after the modal is dismissed.

Let us see step by step to learn how the modal controller works in the Ionic application.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here.

Step 2: Create a new page for the modal controller. To do this, run the following command.

Step 3: After creating the modal page, open the following files, and insert the given code. You can modify the code according to your needs.

Modal.page.html

Here, we are going to call the dismiss method and add the content which displays in the modal UI.

<ion-header>
  <ion-toolbar>
    <ion-title>Modal Content</ion-title>
    <ion-icon name='close-circle' (click)='dismiss()' style='float: right;'></ion-icon>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/avatar.png"/>
      </ion-avatar>
      <ion-label>
        <h2>Peter</h2>
        <p>Hi! JavaTpoint is a best Tutorial WebSite.</p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/avatar.png"/>
      </ion-avatar>
      <ion-label>
        <h2>Frodo</h2>
        <p>Hi! This is a Great Ionic 4 Tutorial.</p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/avatar.png"/>
      </ion-avatar>
      <ion-label>
        <h2>Sam</h2>
        <p>This is an example of Modal Controller.</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Modal.page.ts

In this file, we have to create a dismiss method to dismiss the modal UI.

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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor(public modalCtrl: ModalController) {}

  ngOnInit() {
  }
  dismiss() {
    this.modalCtrl.dismiss();
  }
}

Modal.module.ts

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 { ModalPage } from './modal.page';

const routes: Routes = [
  {
    path: '',
    component: ModalPage
  }
];

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

Step 4: Next, configure the app.module.ts file. It is responsible for the entry of a modal page in the application. Here, you need to import the modal page and then add it inside the @NgModule.

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';
import { ModalPageModule } from './modal/modal.module';

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

Step 5: Open the home.page.ts file and add the following code. In this file, the showModal() function is used for creating the modal controller. Here, you can also pass the data by using the componentProps option.

import { Component } from '@angular/core';
import { ModalController} from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public modalCtrl: ModalController) {}
  async showModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage
    });
    return await modal.present();
  }
}

Step 6: Open the home.page.html file and add the following code.

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic Modal</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <h1>Modal Controller</h1>
  <ion-button color="primary" (click)="showModal()">
    Show
  </ion-button>
</ion-content>

Step 7: Now, run the application, and you will get the following screen.

In the above screen, click on the Show button, the following screen appears in your browser. Here, you can see the modal page content as a temporary UI. It can be closed by clicking on the close icon.