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


Create constructor as shown in below image


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.


Calling a common modal method as shown in the below image


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


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

Leave a Comment