Ionic 6 Angular Modals Tutorial – Passing & Receiving Data

Table of Contents

1. Ionic Environment Setup
2. Create Modal Popup Page
3. Receive Data in Ionic Modal
4. Passing Data to Modal
5. Display Modal Popover

Ionic Environment Setup

To create modals in Ionic, you must have the latest versions of Node, npm and Ionic CLI configured on on our system. Type and execute command to install or update Ionic CLI:

npm install -g cordova ionic

To build modals in an Ionic app we need to generate a new blank Ionic Angular app:

ionic start ionic-modals-app blank --type=angular

Get into the project:

cd ionic-modals-app

Create Modal Popup Page

In this step, we will create a regular modal popup page in the Ionic Angular project. Enter the below command in your terminal.

ng generate page ModalPopup

We have added a button with a click event to close the modal, similarly a model title to display on view.

A new model page has created, hence open and add code in modal-popup.page.html file.

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Modal Popup Example</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        Model Title : {{ model_title }}
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <ion-button (click)="closeModel()">Close</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Receive Data in Ionic 6 Modal

Update the following code in modal-popup.page.ts file, plus import ModalController and use it to dismiss the modal and pass the data to show response.

import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
  selector: 'app-modal-popup',
  templateUrl: './modal-popup.page.html',
  styleUrls: ['./modal-popup.page.scss'],
})
export class ModalPopupPage implements OnInit {
  @Input() model_title: string;
  constructor(
    private modalController: ModalController,
  ) { }
  ngOnInit() { }
  async closeModel() {
    const close: string = "Modal Removed";
    await this.modalController.dismiss(close);
  }
}

Ideally, the ModalController class provides the dismiss() method, which closes the modal when triggered by the user.

Passing Data to Modal

Let’s pass data to modal in Ionic using modalController.create() method. To initiate the modal popover in Ionic add the following code inside the src/app/home/home.page.ts file.

import { Component } from '@angular/core';
import { ModalPopupPage } from '../modal-popup/modal-popup.page';
import { ModalController } from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  modelData: any;
  constructor(public modalController: ModalController) {}
  async openIonModal() {
    const modal = await this.modalController.create({
      component: ModalPopupPage,
      componentProps: {
        'model_title': "Nomadic model's reveberation"
      }
    });
    modal.onDidDismiss().then((modelData) => {
      if (modelData !== null) {
        this.modelData = modelData.data;
        console.log('Modal Data : ' + modelData.data);
      }
    });
    return await modal.present();
  }
}

Import the ModalController from ‘@ionic/angular’ helps in calling the regular pages in Ionic. Inject ModalController in the constructor to use the create() method to pass the data to the modal popover.

Display Modal Popover

Get into the home.page.html file, then place the following code, define click event, and bind the openIonModal() method to open the modal and receive the data response and display in the view.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Angular Modal Demo
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <div id="container">
    <ion-button (click)="openIonModal()">Open Modal</ion-button>
    <strong *ngIf="modelData">{{modelData}}</strong>
  </div>
</ion-content>

The modal has been created and ready to be used consequently, run the Ionic app to start the Ionic development server using the below command:

ionic serve

Conclusion

Finally, we have completed the Ionic Angular Modals tutorial. In this tutorial, we learned how to send data to the modal component page vice versa receive data responses on the modal page.