Ionic modal is displayed as a temporary UI that slides into the screen. The ionic modal is a dialog box that is displayed at the top of the app’s content, and it will disappear after the user interaction. The modal is useful as a select component. When there are many options to select from or when filtering items in a list. Such cases are that login or signup, composing messages, and presenting app configuration options.

Ionic Modal Controller

The modal controller programmatically controls the modal component. Ionic modal can be created or dismissed from the modal controller. By using the create() and dismiss() method, you can create and dismiss the ionic modal easily.

There are two methods of modal which are used in the ionic application that are as follows:

  1. Create
  2. Dismiss

Create

The create() method is used to create the modal. It creates a modal overlay with the different modal options. By setting modal options in the create method, you can customize the controller.

Dismiss

The dismiss() method is used to dismiss the modal overlay after creating the modal. For performing the additional actions after the model is dismissed, then you can call the onDidDismiss function.

Now, you can see how the modal controller works in the ionic application. You can use these steps to create the modal that are given below:

Step-1: Firstly, you create a new project. To creating a new project, you can select the blank app template to create a home page in the ionic.

Step-2: Create a new page for the modal controller. For creating a modal controller in the ionic application, you are required to run the given below command before running the ionic serve command.

Step-3: After creating the model page in the ionic application, you open the following files and add the provided code. You can also modify the code according to your requirements.

Example: This example explains how you can work with the modal controller in the ionic application.

Modal.page.html

Modal.page.ts

Here, you have to create a dismiss() method to dismiss the modal user interface.

Step-4: In this step, you have to construct the app.module.ts file. Here, you can import the modal page and then include it inside the @NgModule.

App.module.ts

Step-5: In this step, you open the Home.page.html file to write the html code for the ionic application.

Home.page.html

Step-6: In this step, you open the home.page.ts file and write the ts code to the ionic application. The showModel() method is used to create the modal cotroller.

Home.page.ts

Output: After executing this code, you will get the output, as shown below:

Ionic Modal

When you click on the show modal button, then it opens the new page on the mobile screen. If you want to close that page, then you click on the close button which appears at the bottom of the toolbar, as shown below:

Ionic Modal2

Pin It on Pinterest

Share This