Mastering Mobile Application Development with Ionic/

...

/

The List UI Component

The List UI Component

Explore the Ionic list UI component with a simple app.

We'll cover the following...

Creating a new app

Let’s begin exploring the Ionic List UI component by creating a new Ionic app with the following commands:

ionic start template-app blank --type=angular

Try running this command in the terminal below, and answer the prompts as they appear,

Terminal 1
Terminal
Loading...

Modifying the home template

With our newly created template-app project, let’s start by modifying the home page template-app/src/app/home/home.page.html component template to use an Ionic list component with the following changes (highlighted):

Press + to interact
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      My App
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item
      *ngFor="let page of pages"
      (click)="setNavigationLink(page)"> {{ page.title }}
    </ion-item>
  </ion-list>
</ion-content>

If we break the above code down, here is what ...