Display Data with Ionic 4 List Component

Instructor: [00:00] Lists are one of the backbones of most applications. Let's explore the Ionic list component. I have a service already included in my application that will provide the data for me. In the template, I'm going to add an ion-list item. I need to define the list items themselves by adding an ion-item component.

[00:20] Next, I'm going to include the NG4 directive to access the data from the service. This component is a wrapper for the actual content within our list item. I'm going to use this component to set my router link so that tapping on the row will navigate the user to a details page.

[00:38] One of the changes in Ionic 4 was the need to include the ion-label component around any text we might want to display. In earlier versions of Ionic, this was not necessary. Initially, let's just list out the Apollo mission numbers. We'll wrap that data in an h2 tag. For the secondary line, let's display the mission duration.

[01:01] Saving, then running ionic serve --lab from the command line, we can see the results for both iOS and Android. As you can now see, on iOS, there are disclosure arrows or detail arrows that have been implied since we included a router link. We can control this by adding the detail property to our item. If we do set it to true, it will be applied regardless of the platform.

[01:27] Since each Apollo mission had a patch, let's apply that next to our mission information. To do that, we can use the ion-thumbnail component. Since I want the image to be on the left, I will set the slot value to be start. Within that component, I'm going to add an image tag and define its source path.

[01:46] By default, the thumbnail is going to resize itself to fit its parent, in this case, our ion-item. Thumbnail image will also always be square. If we want our images to appear like avatars, we can use the ion-avatar component instead.

[02:05] Here, let's switch to the mission details template. We have a list here that's going to display the three astronauts for the mission. Currently, it shows their name and their role. Let's change this to use the Ionic avatar component here.

[02:20] Ion-avatar and again define the slot of start. Then we'll just add our image tag and set its source. Saving. Now, when we navigate to the details page, you can now see the avatars have been added and transformed into a circle.