Start an Ionic 2 App with the CLI

Build your first page component with Ionic 2

Use Sliding Gestures to Reorder an Ionic 2 List

Use the Ionic CLI to Generate Angular 2 Mobile Components

Fetch data from an API using Angular 2 HTTP module 

Lazy Load Data with Ionic 2

Navigate Between Mobile Screens  with the Ionic 2 NavController

Preview an Angular 2 Mobile  App with Ionic Lab

Create Angular 2 Mobile Card based layouts with Ionic 2

Use Ionic 2 NavController to Manipulate App History

Create an Overlay Component with the Ionic 2 Overlay API

Create a Native Mobile Side Menu Layout in Ionic 2

Building apps with Ionic 2

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:

- [ModalController](http://ionicframework.com/docs/2.3.0/api/components/modal/ModalController/)
- [ViewController](http://ionicframework.com/docs/2.3.0/api/navigation/ViewController/)
- [AlertController](http://ionicframework.com/docs/2.3.0/api/components/alert/AlertController/)

https://app.egghead.io/api/v1/lessons/angular-create-an-overlay-component-with-the-ionic-2-overlay-api/subtitles

[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.

Create an Overlay Component with the Ionic 2 Overlay API

Share this video with your friends

Course

Building apps with Ionic 2