Chapter 6. Advanced Ionic Components

In this chapter, we will extend the application we created in Chapter 5, The London Tourist App. We are going to learn how to add some more complex features like the Ionic Popover and the Ionic Modal components to our current application. At the end of this chapter, we will have a popover menu and a modal window as part of our application.

The Ionic Popover

The Ionic Popover component allows us to add a popover menu to our application. A popover menu is a contextual menu that is used to provide a hidden menu or extra menu options. It is normally used when we have limited space and want to present a list of options. Instead of cramming our limited available space, we create some sort of button so that, when clicked, the popover menu can pop up and show these menu items.

The following screenshot shows a good description of what a popover does in reality:

Implementing the popover

We are going to implement our popover in our already existing application. The first thing you should do is open your application, as you have left the London Tourist Application in the previous chapter. What we will be aiming to do is create a popover that has three extra options as a list. These three options are About, Help and Logout. These three options will not perform any action as we will only be placing them for the sake of example. The following...

The Ionic Modal

The Ionic Modal is a component feature that Ionic provides and is used to create a modal window in our application. A modal window is a view that pops up on an existing page without losing the context of your current action. As soon as it is dismissed, the previous view state is restored. It is a great tool for collecting extra information or displaying something on the screen without losing track of our current state.

Creating the modal

Ionic exposes the modal functionality via a service called the $ionicModal service. This service provides us a way of creating a modal in our application. Before we begin implementing our modal, let's understand what we aim to do with the modal feature in our application.

We will still be using our LTA application and adding a modal. We want this modal to mimic a sample About page of our application which will have some small details about the app. Remember that we already have a button from the popover we created earlier which has a text labeled...

Summary

In this chapter, we used two very important features of Ionic and learned to create a popover and modal. We still used our LTA application from the previous chapter. The Ionic Popover is a great feature which is used to add extra menu items or provide contextual menu options. We also learned about the Ionic Modal, which is used to provide a view over another view of the app while maintaining the context.

In the next chapter, we will learn to use some of the customization techniques of Ionic, along with how to customize our Ionic app.