The ion-list and ion-item directives

Since we are familiarizing ourselves with most of Ionic's directives and services, I thought it worth mentioning the ion-list and ion-item directives.

Lists are one of the most common display patterns when working with mobile apps. In Ionic, you can use the CSS version of the lists, as we have seen in Chapter 3, Ionic CSS Components and Navigation, or you can use the directive version of the lists.

The advantage of using the directive version of the list is that it provides additional attributes such as ion-delete-button, ion-reorder-button, and ion-option-button, which help us manage the lists better.

We will be testing these directives by scaffolding a new blank app; run this:

ionic start -a "Example 25" -i app.example.twentyfive example25 blank

Using the cd command, go to the example25 folder and run this:

  ionic serve

This will launch the blank template in the browser.

We will be implementing an example, provided in the Ionic docs, that covers all the...