Ionic 5 Angular modals tutorial; throughout this tutorial, you will pursue how to add a modal popup in an Ionic app. Additionally, we will share with you how to pass the data to Ionic modals and receive the data response in an Ionic modal popover.

The modals are a user interface element, a container or container which manifests when it is called over the web screen to display important content. It immediately grabs the user’s attention by showing the essentials information. Theoretically, Modal is also recognized by other names such as Popup, Popover and Lightbox.

This guide will help you assimilate how to profoundly create modals in Ionic and pass and receive data to Ionic modals effortlessly from step by step instructions.

How to Pass and Receive Data to Ionic 5 Modal

• Step 1: Install Ionic App
• Step 2: Add Modal Popover in Ionic
• Step 3: Open Ionic Modal
• Step 4: Ionic Modal Pass and Receive Data
• Step 5: Test Ionic App

Install Ionic App

To begin with, Ionic development, ensure to install the latest version of the Ionic CLI tool. However, if you have already installed then use the below command to update the tool:

npm install -g @ionic/cli

Now, you can create the new Ionic Angular app:

ionic start ionic-modal-example blank --type=angular

Head over to app:

cd ionic-modal-example

Add Modal Popover in Ionic

Let us create a new Modals page in Ionic to manage the modal popover separately.

ng generate page ModalPopover

In the next step, add a button in ModalPopoverPage, create and add close event to close the modal in Ionic.

Open and add suggested code in the modal-popover.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Modal Popover Demo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        Model : {{ name }}
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <ion-button (click)="close()">Close</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

The ModalController api is useful for closing the modal; you can access the dismiss() method to remove the modal from the view.

Open and add suggested code in the modal-popover.page.ts file:

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

@Component({
  selector: 'app-modal-popover',
  templateUrl: './modal-popover.page.html',
  styleUrls: ['./modal-popover.page.scss'],
})

export class ModalPopoverPage implements OnInit {

  @Input() name: string;

  constructor(
    private modalCtr: ModalController,
  ) { }

  ngOnInit() { }

  async close() {
    const closeModal: string = "Modal Closed";
    await this.modalCtr.dismiss(closeModal);
  }

}

Open Ionic Modal

Now, we have seen how to create a reusable modal popup component in Ionic. We will show you how to show ModalPopoverPage from the default Home page using the ModalController API.

Add the following code in home.page.html file to open the modal page.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <ion-button (click)="initModal()">Open Modal</ion-button>

    <p *ngIf="modalDataResponse">{{modalDataResponse}}</p>
  
  </div>
</ion-content>

Ionic Modal Pass and Receive Data

You can pass data to the Ionic modal using the componentProps object, which is available within the create() method. Likewise we may receive the data response and display in the ionic page.

Update the given code in home.page.ts file:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  modalDataResponse: any;

  constructor(public modalCtrl: ModalController) {}

  async initModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPopoverPage,
      componentProps: {
        'name': 'The Winter Soldier'
      }
    });

    modal.onDidDismiss().then((modalDataResponse) => {
      if (modalDataResponse !== null) {
        this.modalDataResponse = modalDataResponse.data;
        console.log('Modal Sent Data : '+ modalDataResponse.data);
      }
    });

    return await modal.present();
  }

}

Test Ionic App

Now, run the Ionic app using the below commands:

ionic serve

You can eventually use the following url to test the app:

http://localhost:8100

Conclusion

In this Ionic 5 modals example tutorial, we explained how to create reusable Modal dialog component systematically and use modals in the Ionic app. Additionally, we had a look at how to pass and receive the data in ionic modals.