Ionic 7 Angular Modal Tutorial – Passing & Receiving Data

Last Updated on by in Ionic

In this Ionic tutorial, we are going to learn how to use modal popover in an Ionic Angular application.

We will also learn how to pass data and receive the data response in Ionic 6 modals.

Ionic Angular Modals offers powerful way to show dialog to your users.

They can be used for a variety of purposes, such as displaying confirmation message, taking user input, or getting user’s attention along with some additional information.

We first need to create a new component that will be used to display the modal content, after creating the modal in Ionic we can send data as well as obtain data.

Table of Contents

  • Ionic Environment Setup
  • Create Modal Popup Page
  • Receive Data in Ionic Modal
  • Passing Data to Modal
  • Display Modal Popover

Ionic Environment Setup

This tutorial assumes that you have already updated to minimum Node 18, and Ionic 7. Make sure to update your development environment as per the mentioned requirement.

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:

sudo 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

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 file.

    <ion-title>Ionic Modal Popup Example</ion-title>

      <ion-col text-center>
        Model Title : {{ model_title }}
      <ion-col text-center>
        <ion-button (click)="closeModel()">Close</ion-button>

Receive Data in Ionic Modal

Update the following code in 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';

  selector: 'app-modal-popup',
  templateUrl: './',
  styleUrls: ['./'],

export class ModalPopupPage implements OnInit {

  @Input() model_title: string;

    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/ file.

import { Component } from '@angular/core';
import { ModalPopupPage } from '../modal-popup/';
import { ModalController } from '@ionic/angular';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

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 =;
        console.log('Modal 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 file.

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">
      Ionic Angular Modal Demo

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

    <strong *ngIf="modelData">{{modelData}}</strong>

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


Modals are handy UI components; Modals offer seamless way to display dialogs to your users.

They can be used for a variety of purposes: showing confirmation messages, asking for user input, or providing additional information.

In this tutorial, we learned the technique on how to send data to the modal component page.

Also get the modal value or receive data responses on the modal page.

Eventually, we have completed the Ionic Angular modals tutorial.