Multi-line List

Managing the home page list

As we saw in the last lesson, the list in our template-app looks plain and, well, kind of boring. It’s not particularly appealing even if it gets the job done (and that job is done quite well). We need some further design enhancements.

We could modify the styling for our list component using the application Sass files, but that would be a little overkill when we can rely on a far easier option instead.

Let’s look at what the Ionic Component API offers and how we might be able to use that to give our list a little more “oomph.”

At the moment, we have implemented a basic list, but there are lots of list variations we could choose from:

• Inset Lists
• List Dividers
• List Headers
• Icon List
• Avatar List
• Multi-line List
• Sliding List
• Thumbnail List

Let’s play with a couple of these list variations in our app, starting with a multi-line list.

Adding a multi-line list

As the name implies, a multi-line list displays multiple items in each <ion-item> component over more than one line.

When an <ion-item> component contains multiple lines of content, its height will be automatically adjusted to fit these items, making it an ideal choice for displaying elements such as headings, thumbnail images, and short summaries.

Updating the home page component class

We’ll now make the following changes to the template-app/src/app/home/home.page.ts (highlighted):