Javatpoint Logo
Javatpoint Logo

Ionic Modal

The modal in Ionic is displayed as a temporary UI that slides into the screen. It appears on top of the app's content and must be dismissed by the app before resuming an interaction. It is mainly useful for login/sign-up page, composing messages, filtering items in a list, or presenting app configuration options.

Modal Controller

It is responsible for creating modal in the Ionic application. It uses create() method for creating modal. You can customize the controller by setting modal options in the create method.

Dismiss Method

After creating a modal, you can dismiss it by calling the dismiss() method on the modal controller. The onDidDismiss function can be called for performing additional actions after the modal is dismissed.

Let us see step by step to learn how the modal controller works in the Ionic application.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here.

Step 2: Create a new page for the modal controller. To do this, run the following command.

Step 3: After creating the modal page, open the following files, and insert the given code. You can modify the code according to your needs.

Modal.page.html

Here, we are going to call the dismiss method and add the content which displays in the modal UI.

Modal.page.ts

In this file, we have to create a dismiss method to dismiss the modal UI.

Modal.module.ts

Step 4: Next, configure the app.module.ts file. It is responsible for the entry of a modal page in the application. Here, you need to import the modal page and then add it inside the @NgModule.

Step 5: Open the home.page.ts file and add the following code. In this file, the showModal() function is used for creating the modal controller. Here, you can also pass the data by using the componentProps option.

Step 6: Open the home.page.html file and add the following code.

Step 7: Now, run the application, and you will get the following screen.

Ionic Modal

In the above screen, click on the Show button, the following screen appears in your browser. Here, you can see the modal page content as a temporary UI. It can be closed by clicking on the close icon.

Ionic Modal
Next TopicIonic Popover




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA