Ionic 3 Show Modals Example and Pass Data

In this post we will discuss on How to Add a Modal in Ionic 3 Application with Latest Ionic CLI (v4.12.0) for Adding Modals in Ionic 4 App check this post

As the Ionic team has come up with the latest version Ionic 4 which is web-component based, still some developers working on previous versions of applications which were built on Ionic 3 previous version may face some difficulties as CLI is also updated and Ionic docs are not properly linked they may land mistakenly from v3 to v4 or vis versa.

First of all, go to these links for V3 docs  & V4 docs. You can check my previous post on How to Create Ionic 3 App in Latest v4 CLI? & How to install Native plugins in Ionic 3 Application using the latest CLI?

First, we will create a new Ionic 3 Application. Make sure you have the latest version on Ionic CLI installed by running following command

$ npm install -g ionic@latest

$ ionic start Ionic3Modals blank --type=ionic-angular
$ cd Ionic3Modals

Next, we will create a new ModalPage to show in Ionic Modal. Run the following command to create a new page

$ ionic generate page newModalPage --specs false

the above ionic command will create a page without specs as we don’t need testing right now.

We will add the above newModalPage’s module in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NewModalPageModule } from '../pages/new-modal/new-modal.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    NewModalPageModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Now we will add a Button to open Modal from the Home page

<!-- home.html -->
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 Modals
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div *ngIf="madalDismissData">
  Data returned by Modal ::  {{madalDismissData}}
  </div>

  <button ion-button (click)="openModal()">Open Modal</button>

</ion-content>

Here we will show data returned by Modal on Dismiss in variable modalDismissData

openModal() will open modal by calling create a method in the home.ts file

// home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { NewModalPage } from '../new-modal/new-modal';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  madalDismissData: any;

  constructor(
    public modalCtrl: ModalController,
    public navCtrl: NavController
  ) {

  }

  openModal() {
    const profileModal = this.modalCtrl.create(NewModalPage, { userId: 8675309 });
    profileModal.onDidDismiss(data => {
      console.log(data);
      this.madalDismissData = JSON.stringify(data);
    });
    profileModal.present();
  }

}

We can also pass data in create method to our modal page. The onDidDismiss method will be called when the dismiss() method is called from Modal Page new-modal.ts

//new-modal.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

/**
 * Generated class for the NewModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-new-modal',
  templateUrl: 'new-modal.html',
})
export class NewModalPage {

  userId: number;

  constructor(
    public viewCtrl: ViewController,
    public navCtrl: NavController,
    public navParams: NavParams
  ) {
    console.log('UserId', navParams.get('userId'));
    this.userId = navParams.get('userId');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NewModalPage');
  }

  dismissModal() {
    let data = { 'foo': 'bar' };
    this.viewCtrl.dismiss(data);
  }

}

In constructor or ionViewDisLoad we can get data passed from the home.ts file using the present() method, for that we use NavParams service.

The dismissModal() method will call dismiss() method of ViewController service in ionic-angular. Also, we have passed data in this method which will be caught by the onDidDismiss method at the home.ts.

//new-modal.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

/**
 * Generated class for the NewModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-new-modal',
  templateUrl: 'new-modal.html',
})
export class NewModalPage {

  userId: number;

  constructor(
    public viewCtrl: ViewController,
    public navCtrl: NavController,
    public navParams: NavParams
  ) {
    console.log('UserId', navParams.get('userId'));
    this.userId = navParams.get('userId');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NewModalPage');
  }

  dismissModal() {
    let data = { 'foo': 'bar' };
    this.viewCtrl.dismiss(data);
  }

}

Run application

$ ionic serve --open

In the above tutorial we got to know, How to open modal in Ionic 3 application and also pass data on Modal open and get back info in dismissing modal to parent component. For Ionic 4 Modal tutorial visit this post.