Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

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

```typescript

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

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

Let's create UI in home page

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Codesundar.com
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img src="{{profile.imgURL}}" />
      </ion-avatar>
      <ion-label>
        <h3>{{profile.name}}</h3>
        <p>{{profile.email}}</p>
      </ion-label>
      <ion-button (click)="edit()">
        Edit
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>

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

home.page.ts

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

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

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

edit.page.html



<ion-header>
  <ion-toolbar>
    <ion-title>edit</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label>
      Name
    </ion-label>
    <ion-input type="text" [(ngModel)]="user.name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>
      Email
    </ion-label>
    <ion-input type="text" [(ngModel)]="user.email"></ion-input>
  </ion-item>
  <ion-button (click)="close()">Close</ion-button>
</ion-content>

edit.page.ts

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

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

  user: any = {};

  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams
  ) {

    this.user = this.navParams.data;

  }

  ngOnInit() {
  }

  close() {
    this.modalCtrl.dismiss(this.user);
  }
}

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.