Create an Overlay Component with the Ionic 2 Overlay API
Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:
[00:01] Overlay components are components that are created and displayed outside of your app's main context. The simplest form of this is a modal. We'll import modal from Ionic Angular, and then inject it into our constructor.
[00:26] In our pushPage method, we'll replace the setPages call with a modalController.create. The create method takes three arguments -- the component, any data or nav parameters you want to pass along, and then options for the modal transition.
[00:48] This is very similar to how push works inside of nav controller. For our case, we'll pass along the detail page, and then the user parameter that's getting passed in. To actually display the modal, we'll call .present on the actual modal instance.
[01:08] Now, there's a bit of housekeeping that we need to do since the back button isn't created for us automatically. In our detail page, let's import view controller from Ionic Angular, then inject it into our constructor.
[01:29] Since all overlay components are technically outside of the nav controller, we use the view controller class to interact with them. We'll create a method called dismiss, and inside of it, we'll call this.viewController.dismiss. We'll also need to wire this up in our template, so we'll just add a button that calls this method.
[01:58] Now, we're dismissing the modal, but what if we want to prompt the user first? Well, we can use an overlay component called alert. We'll head over to detail.ts, import alert controller, and then inject it into our constructor.
[02:21] In the dismiss method, we'll create a new alert from alertController.create. We'll give it a title of close modal, then a message that just says, "Are you sure?" followed by a buttons array. Now, the buttons array will just create the UI we'll be interacting with, and wire up what to do when we tap them.
[03:07] In the first button, we set its text to cancel, and then we set its rule to cancel as well. This just tells the alert how to style it and where to position it. We attach a handler that will be called when we click the button. In this instance, we're just logging out click.
[03:26] For the confirm button, we will set its text to yes. In its handler, we'll call this.viewController.dismiss. To wrap it up, we'll call alert.present, and that will display the alert.
[03:47] Now, when we tap the user, we'll click close. We'll get an alert saying, "Do we want to close this?" We'll hit yes, and then we can close the modal.