Ionic 4/Angular Modals Tutorial – Passing & Receiving Data

Ionic 4 Environment Setup

To create Modals in Ionic 4, you must have the latest versions of Node js, Ionic and Cordova installed on our machine.

To get started with Node js you need to download the latest version of Node from here. Then, you can follow this tutorial to install Node js in macOS.

Install Ionic CLI & Cordova

Make sure you must have installed the latest version of Ionic CLI. If its already installed then please update it to the latest Ionic version.

If you already have Ionic 4 CLI installed then skip this step, else follow the below steps to install Ionic CLI. Run below command to install Ionic and Cordova.

sudo npm install -g cordova ionic

To update the Ionic and Cordova to the latest version, use the following command:

sudo npm update -g cordova ionic

Please make sure you must have Xcode set up on your machine. We are using Visual Studio Code in this tutorial; however, you can use any text editor of your choice.

Now we are all set to create a brand new Ionic project, follow the next step.

Create an Ionic 4/Angular Project

To build modals in an Ionic 4 app we need to generate basic Ionic/Angular project from scratch. Run the below command to create a brand new Ionic 4/Angular project.

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

Let’s pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this prompt next time, supply template, the second argument to ionic start.

? Starter template: 
  tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the content area 
❯ blank        | A blank starter project 
  my-first-app | An example application that builds a camera with gallery 
  conference   | A kitchen-sink application that shows off all Ionic has to offer

Let’s head over to the ionic modals app’s project directory.

cd ionic-modals-app

Now, run the Ionic 4 app using the below commands.

ionic serve

ng run app:serve --host=localhost --port=8100

Now, your project will open on http://localhost:8100/home URL, you can view your Ionic/Angular project in the browser’s address bar.

Passing Data to Modal Page in Ionic 4

Let’s pass data to modal in Ionic 4 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 { ModalController } from '@ionic/angular';
import { ModalPopupPage } from '../modal-popup/modal-popup.page';


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

export class HomePage {

  constructor(public modalController: ModalController) { }

  async showModal() {
    const modal = await this.modalController.create({
      component: ModalPopupPage,
      componentProps: {
        'name': 'Hello User'
      }
    });
    return await modal.present();
  }

}

Import the ModalController from ‘@ionic/angular’, this module helps in calling the regular pages in Ionic 4. Then, Inject ModalController in the constructor. Use the .create() method to pass the data to the modal popover in the showModal() function.

Create The Modal Popup Page

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

ng generate page ModalPopup

Import ModalPopup page in app.module.ts and inject inside the declarations and entryComponents array.

import { ModalPopupPage } from './modal-popup/modal-popup.page';

@NgModule({
  declarations: [ModalPopupPage],
  entryComponents: [ModalPopupPage],
  imports: [...],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Receive Data in Ionic 4 Modal

To get the data in Ionic 4, we need to import the NavParams in the ModalPopupPage and inject it inside the constructor(), use navParams.get() method to receive the data response in the browser’s console.

Go to src/app/modal-popup.page.ts and add the following code in it.

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

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

export class ModalPopupPage {
  @Input() name: string;

  constructor(
    public navParams: NavParams
  ) {
    console.log(navParams.get('name'));
  }
}

Dismissing Modal in Ionic 4

To terminate the modal, import and inject ModalController and define the closeModal() method and bind it to ion-button HTML tag.

Final src/app/modal-popup/modal-popup.page.ts file.

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

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

export class ModalPopupPage {
  @Input() name: string;

  constructor(
    public navParams: NavParams,
    public modalCtrl: ModalController
  ) {
    console.log(navParams.get('name'));
  }

  public closeModal() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }
}

Call the closeModal() method in HTML template.

<ion-button ion-button (click)="closeModal()">Close</ion-button>

Here, is the full HTML code for Ionic modal template. Add the code inside the modal-popup.page.html file.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button ion-button (click)="closeModal()">Close</ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
</ion-content>

Showing the Model Popover

To show the model we need to add the click event and pass the showmodal() function in it. Head over to home.page.html template and add the following code inside of it.

<ion-button color="primary" (click)="showModal()">Show Modal</ion-button>

Conclusion

Finally, we have completed the Ionic 4/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. Get the complete source code of this tutorial on my Git repo.