Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

The List UI Component

Explore how to create and use the Ionic List UI component to build dynamic, navigable lists in an Angular app. Learn to modify templates, define data arrays, generate new pages, and preview your app, gaining practical skills for managing UI navigation in Ionic.

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):

HTML
<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 ...