Ionic Modal Tutorial

In this tutorial, we can learn how to display modal in ionic with step by step tutorial.

Download Source code:

Steps to Implement Modal in ionic

  1. Create new page using ionic g page edit where edit is an page name
  2. Declare your page inside app.module.ts


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 { EditPageModule } from './edit/edit.module';

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

Let's create UI in home page

<ion-header [translucent]="true">

<ion-content [fullscreen]="true">
      <ion-avatar slot="start">
        <img src="{{profile.imgURL}}" />
      <ion-button (click)="edit()">

Code Explanation:

  • We have created ionic item where we are displaying name, email address from profile object
  • when user click edit, we can pass the data to edit() and display modal

edit() {
      component: EditPage,
      componentProps: this.profile
    }).then(modalres => {

      modalres.onDidDismiss().then(res => {
        if ( != null) {
          this.profile =;

Code Explanation:

  • we created modalCtrl Object from ModalController
  • Using the object, we're displaying EditPage and we're passing this.profile object to modal
  • We're displaying modal using modalres.present()
  • When user close the modal, we're listening the data via onDidDismiss() and we assigned final value to this.profile

Edit Page


    <ion-input type="text" [(ngModel)]=""></ion-input>
    <ion-input type="text" [(ngModel)]=""></ion-input>
  <ion-button (click)="close()">Close</ion-button>

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

  selector: 'app-edit',
  templateUrl: './',
  styleUrls: ['./'],
export class EditPage implements OnInit {

  user: any = {};

    private modalCtrl: ModalController,
    private navParams: NavParams
  ) {

    this.user =;


  ngOnInit() {

  close() {

code explaination

  • Using NavParams we're receiving data which is passed from the previous (home) page & assign to this.user
  • When user click close() we're dismissing modal with user object.