How to create different Ionic List

Ionic lists allow the developer to group a set of related items in lists. The ionic list is made up of multiple rows of items that can contain buttons, text, icons, toggles, thumbnails, and much more. Ionic lists generally contain items with similar data content, such as images and text. An ion-list can contain a header to display a title at the top of the list.

The header is created by adding the component ion-list-header as the child of the ion-list. Items in the list can be separated using the component ion-item-divider. Apart from the Ionic list, the Ionic framework has lots of pre-built components like modal, action sheet, and more.

In this article, we’ll learn how to use the ionic list and explore different child components we can use inside the list and we had demonstrated a few examples of lists with images, a list with icons, avatars, and more. Let get started.

Setup an Ionic List project

With the release of ionic version 4, the Ionic framework is no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s first create a blank Ionic Angular project.

ionic start listApp blank --type=angular

Creating Ionic Basic List with Ionic list header

Let’s create the first example of the Ionic list basic, where we’ll include the most used subcomponents of the Ionic list. We can change the Ionic list header background by using color properties. We can include an ionic list header at the top of the list by adding a list header <ion-list-header> element. Here’s a quick screenshot of what we’ll be building.

Ionic list with inset attribute

The Ionic lists don’t contain an outside margin by default. Ionic lists have few properties, if we set inset attributes on the list then we will have a margin around and rounded corners on the list. By default inset attribute is false. As we can compare the above image of the list with and without the inset attribute.

Ionic list example with divider

We have demonstrated an example of an ionic list with an ion items divider and we can add different colors available in ionic for ionic list item and divider. Ionic list divider is used for organizing the elements into logical groups. Ionic gives us the child component to separate items in a list.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic - List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list class="ion-padding">
    <ion-list-header color="primary">
      <ion-label>Items Header</ion-label>
    </ion-list-header>
    <ion-item>
      Item type A 1
    </ion-item>
    <ion-item>
      Item type A 2
    </ion-item>
    <ion-item-divider color="danger">
      <ion-label>
        Item Divider B
      </ion-label>
    </ion-item-divider>
    <ion-item>
      Item B 1
    </ion-item>
    <ion-item>
      Item B 2
    </ion-item>
  </ion-list>
</ion-content>

Ionic list subcomponents

We can easily configure an Ionic list by adding its subcomponent like ion-list-header, ion-item, and ion-item-divider. The ionic list is a single component and can have the following subcomponents which we can control its color and mode properties.

Subcomponents	Description
ion-list-header	A list Header is a header component for a list.
ion-item	Adding list row
ion-item-divider	Ionic dividers are used for organizing some elements into logical groups.
ion-thumbnail	Thumbnails can be used by themselves or inside of any element and they can place inside of an ion-item.
ion-avatar	Avatars are circular components that usually wrap an image or icon.
ion-item-sliding	A sliding item contains an item that can be dragged to reveal buttons.
ion-item-group	Item groups are containers that organize similar items together.

Ionic list with image

We can add an image in the Ionic list using the Avatars and thumbnails component. Both these elements are used with an Ionic list and ionic item. We’ll demonstrate here’s a quick screenshot of what we’ll be building.

We have used ion-thumbnail to add images to the list and we also need dummy data for the above list. Let’s create folder data in assets and file countries.json. We need to add the following dummy data in the countries.json file.

[
  {
    "name": "India",
    "flag": "4/41/Flag_of_India.svg",
    "area": 3287263,
    "population": 1324171354
  },
  {
    "name": "France",
    "flag": "c/c3/Flag_of_France.svg",
    "area": 640679,
    "population": 64979548
  },
  {
    "name": "United States",
    "flag": "a/a4/Flag_of_the_United_States.svg",
    "area": 9629091,
    "population": 324459463
  },
  {
    "name": "Russia",
    "flag": "f/f3/Flag_of_Russia.svg",
    "area": 17075200,
    "population": 146989754
  },
  {
    "name": "Germany",
    "flag": "b/ba/Flag_of_Germany.svg",
    "area": 357114,
    "population": 82114224
  },
  {
    "name": "Canada",
    "flag": "c/cf/Flag_of_Canada.svg",
    "area": 9976140,
    "population": 36624199
  },
  {
    "name": "Vietnam",
    "flag": "2/21/Flag_of_Vietnam.svg",
    "area": 331212,
    "population": 95540800
  },
  {
    "name": "Mexico",
    "flag": "f/fc/Flag_of_Mexico.svg",
    "area": 1964375,
    "population": 129163276
  }
]

Import HttpClientModule in app.module.ts

For dummy data to retrieve from API or static local JSON file we need to import HttpClientModule in the app.module.ts file

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
   ....
    HttpClientModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

We need to retrieve our dummy data and let’s edit the home.page.ts file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  countries: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('./assets/data/countries.json').subscribe((data: any) => {
      this.countries = data;
    });
  }
}

In the home.page.html template, we have to loop through the country’s array. Edit home template.

<ion-content color="light">
  <ion-list class="ios list-ios hydrated" inset>
    <ion-list-header class="ios hydrated">
      Country with area and population census
    </ion-list-header>

    <ion-item *ngFor="let country of countries">
      <ion-thumbnail slot="start" class="ios hydrated">
        <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag">
      </ion-thumbnail>
      <ion-label>
        <h2>{{ country.name }}</h2>
        <h3>Population: {{ country.population }}</h3>
        <p>Area: {{ country.area }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Ionic list with Ionic Avatars

Ionic avatars component create circular images. They are typically used to display users’ profile images. Ionic avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.

<ion-list>
  <ion-item>
    <ion-avatar item-left>
      <img src="http://placehold.it/60?text=A">
    </ion-avatar>
    Arjun
  </ion-item>
  <ion-item>
    <ion-avatar slot="start">
      <img src="http://placehold.it/60?text=B">
    </ion-avatar>
    <ion-label>Item Avatar slot start</ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar slot="end">
      <img src="http://placehold.it/60?text=C">
    </ion-avatar>
    Item Avatar slot end
  </ion-item>
</ion-list>
<ion-chip>
  <ion-avatar>
    <img src="http://placehold.it/60?text=E">
  </ion-avatar>
  <ion-label>Chip Avatar</ion-label>
</ion-chip>

Ionic list with Thumbnails

Ionic thumbnails are rectangular images larger than avatars and they usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.

<ion-list>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="http://placehold.it/100x60?text=F1">
    </ion-thumbnail>
    <ion-label>Apple</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="end">
      <img src="http://placehold.it/100x60?text=F2">
    </ion-thumbnail>
    <ion-label>Banana</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail>
      <img src="http://placehold.it/100x60?text=F3">
    </ion-thumbnail>
    <ion-label>Orange</ion-label>
  </ion-item>
</ion-list>

Ionic Icons list

Ionic has lots of built icons that are ready to use and we can be displayed them using the component ion-icon with the name of the icon. Here is the site of the Ionic icon list check the site for what icon you want to use in your project. https://ionic.io/ionicons.

These icons are premium and designed for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open-source, MIT licensed, and built by Ionic.

<!-- Icons -->
<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

We can use ionic icons in buttons, items, lists, and more. Here we have demonstrated the ionic icon in the list with its size property.

  <ion-list>  
    <ion-item>  
      <ion-icon name="settings"></ion-icon>  
    </ion-item>         
    <ion-item>  
      <ion-icon name="log-out"></ion-icon>  
    </ion-item>  
    <ion-item>  
      <ion-icon name="alarm" size="small"></ion-icon>  
    </ion-item>  
    <ion-item>  
      <ion-icon name="alarm" size="large"></ion-icon>  
    </ion-item>  
</ion-list>

ion-note : Notes are text elements generally used as subtitles that provide more information.

<!-- Default Note -->
<ion-note>Default Note</ion-note>

<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>

<!-- Notes in a List -->
<ion-list>
  <ion-item>
    <ion-label>Note (End)</ion-label>
    <ion-note slot="end">On</ion-note>
  </ion-item>

  <ion-item>
    <ion-note slot="start">Off</ion-note>
    <ion-label>Note (Start)</ion-label>
  </ion-item>
</ion-list>

Grouping of Items in ionic list

If a list contains a lot of items, it’s better to group those items for users to view and find them easily. A typical example is the contact list, which is usually grouped by the first character of each contact’s first name. Grouping of items can be done using the component ion-item-group.

The listing below is an example of the simple contacts list and another example we have used ion-item-sliding to drag an item to display a button or content associated with an item. We use the component ion-item-divider to show the name of each group. We don’t need to use the component ion-list when grouping items.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic 5 - item group
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-item-group>
    <ion-item-divider>
      <ion-label>A</ion-label>
    </ion-item-divider>
    <ion-item>
      <ion-label>Alexa</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Amber</ion-label>
    </ion-item>
  </ion-item-group>

  <!-- They can also be used to group sliding items -->
  <ion-item-group>
    <ion-item-divider>
      <ion-label>
        Asia Country Game
      </ion-label>
    </ion-item-divider>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>India</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          Cricket
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>
          <h3>Japan</h3>
        </ion-label>
      </ion-item>
      <ion-item-options>
        <ion-item-option>
          FootBall
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-item-group>
</ion-content>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Employee record</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option (click)="favorite()">Favorite</ion-item-option>
        <ion-item-option color="danger" (click)="share()">Share</ion-item-option>
      </ion-item-options>
  
      <ion-item-options side="end">
        <ion-item-option (click)="unread()">Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

ionic collapsible list

We can have an ionic collapsible list by using the *ngIf directive and clicking event. Below the screenshot, we have the Ionic collapsible list. We have used the ionic toggle component to toggle isCollapsed to true or false. If isCollapsed is true then we hide the list and show the list when isCollapsed is false.

We have used the toggle component, you can use an ionic item with an icon to change the value of isCollapsed. First, we need to define our isCollapsed initial value in our component typescript.

isCollapsed = false;

Now in our component template add the following ngIf condition and list to enable an ionic collapsible list.

 <ion-list>
    <ion-list-header color="warning">
      <ion-label>Framwork heading collabsable</ion-label>
      <ion-toggle (click)="isCollapsed == false ? isCollapsed = true : isCollapsed = false"></ion-toggle>
    </ion-list-header>
    <div *ngIf="!isCollapsed">
      <ion-item>Ionic</ion-item>
      <ion-item>Vue</ion-item>
      <ion-item>Flutter</ion-item>
      <ion-item>Angular</ion-item>
    </div>
  </ion-list>

Ionic list properties

The list provides us a few properties to configure, like list item with the line, no line, margin and rounded the corner. Here we have listed a list of properties.

Attribute	Description	Value
inset	If true, the list will have margin around it and rounded corners.	Boolean \| Default false
lines	How the bottom border should be displayed on all items.	full \| inset \| none \| undefined
mode	The mode determines which platform styles to use.	ios \| md

Conclusion
We can explore the ionic lists with different examples. The ionic list can have multiple rows of Ionic items and we can include text, video, images, and other content inside the ionic items.

Related posts

How to create different Ionic List

How to create different Ionic List

Setup an Ionic List project

Creating Ionic Basic List with Ionic list header

Ionic list with inset attribute

Ionic list example with divider

Ionic list subcomponents

Ionic list with image

Import HttpClientModule in app.module.ts

Ionic list with Ionic Avatars

Ionic list with Thumbnails

Grouping of Items in ionic list

ionic collapsible list

Ionic list properties

Leave a Reply Cancel reply