Ionic 6 Angular Modals Tutorial – Passing & Receiving 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
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.