Ionic 3 / Ionic 2 Modals /ModalController

Also See :
Pass data to a ModalPage Component

A Modal is a content pane that goes over the user’s current page. Usually it is used for making a choice or editing an item. A modal uses the NavController to present itself in the root nav stack. It is added to the stack similar to how NavController.push works.
The modal can later be closed or “dismissed” by using the ViewController’s dismiss method.Data can be passed to a new modal through Modal.create() as the second argument. The data can then be accessed from the opened page by injecting NavParams.

Create a Modal
For creating a Modal first import “ModalController” to your page..as below.

Inject the ModalController in Constructor

Open a Modal Page
Create a button in your page and in its onClick will call the Modal as below

Before Calling the function create the modalpage using terminal by the command

Now if you click on “show modal” button you should be able to see a modal page popups

Closing modal page
Create a button in header of Modal Page like below

we need to import ViewController from ionic-angular

Inject ViewController via component constructor

Now Call Dismiss function

Leave a Reply

Your email address will not be published. Required fields are marked *