Adding modals to an Ionic app


Modals are a big part of apps, let me show you how to use them in Ionic.

3 Mar, 2021 · 3 min read

Modals are a big thing in apps. You see them almost everywhere for small detail transactions.

In this article, I’ll show you how to add your modal to an Ionic app.

The result will look like this.

Ionic Modal component

This tutorial will pick up from our starting Ionic app, which you can download from GitHub.

Modals in an Ionic app

We will be adding a modal to our first tab page. Open up the file.

Start by creating a function that we can call through the HTML in a second. This function will be an async function and call the modalController to create a certain modal.

async presentModal() {
  const modal = await this.modalController.create({
    component: DetailPage

  return await modal.present();

We do have to register the modalController in our constructor.

constructor(public modalController: ModalController) {}

And you might have spotted we use a component called DetailPage, so let’s go ahead and create that one.

ng g page Detail

This will generate the DetailPage for us. (Make sure you import the detail page in the

Calling the modal

We can call the presentModal function from our file to prompt the modal.

<ion-button (click)="presentModal()" expand="block">Show Modal</ion-button>

This will create a button that will open the detail modal on click.

However, when this happens, you might have spotted there is no way to close the modal now.

Luckily we can leverage a global modalController by injecting it into the file.

constructor(public modalController: ModalController) {}

Then we can create a dismiss function, which will handle the dismissal of the modal.

dismiss() {

It’s pretty common to have a back button on the detail page that will dismiss the modal so let’s add one in

    <ion-buttons slot="start">
      <ion-button color="white" (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>

We can add a button on the page that will dismiss the modal.

<ion-content fullscreen class="ion-padding">
  <ion-button (click)="dismiss()" expand="block">Dismiss Modal</ion-button>

This button will do the same, dismiss our modal.

And there you go, modals in Ionic are super easy and helpful. They can even pass and return data, which we’ll discuss in another topic.

You can find today’s code on GitHub.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

How to solve App Tracking Transparency app store rejection in Ionic

4 Aug, 2021 · 4 min read

How to solve App Tracking Transparency app store rejection in Ionic

Ionic tab bar circle middle button

19 May, 2021 · 2 min read

Ionic tab bar circle middle button

Join 2099 devs and subscribe to my newsletter