Ionic V3 Introduction of ModalController

Share the post

Now, In this topic, we will discuss ModalController. As we know in any development of a project we required some popup modals which display our message in a nice box with great CSS. In ionic 3 there is the default modal given by ionic is Modals. This modal can be used in many ways. You can create separate HTML for related Modal with the following command :

       
ionic g page modal-page

As we saw in our previous topic we have created one common provider.

Import ModalController as shown in the below image

Ionic%2BComponent%2BModalController%2BImport

Create constructor as shown in below image

Ionic%2BComponent%2BModalController%2BConstructor

It’s a better approach that we create a common showModal method in our common class. So, We no need to create a modal again & again in our project. So, I have created a common method showModal() in the common.ts file. Please see the below image.

Ionic%2BComponent%2BModalController%2BFunction

Calling a common modal method as shown in the below image

Ionic%2BComponent%2BModalController%2BCallFunctionHTML
Ionic%2BComponent%2BModalController%2BCallFunctionTS

that’s it now you can use the showModal() function whenever you want in the project. the final output is as shown below image :

Ionic%2BComponent%2BModalController%2BPassingData

In the next topic, we will see how to dismiss the modal.

Leave a Comment