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, avatar,s, and more. Let get started.

Setup an Ionic List project

With the release of ionic version 4, the Ionic framework no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let 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 example

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

Ionic List example
<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.

SubcomponentsDescription
ion-list-headerList Header a header component for a list.
ion-itemAdding list row
ion-item-dividerIonic dividers are used for organizing some elements into logical groups.
ion-thumbnailThumbnails can be used by themselves or inside of any element and it can placed inside of an ion-item.
ion-avatarAvatars are circular components that usually wrap an image or icon.
ion-item-slidingA sliding item contains an item that can be dragged to reveal buttons.
ion-item-groupItem 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 using with an Ionic list and ionic item. We’ll demonstrate here’s a quick screenshot of what we’ll be building.

Ionic list with image

We have use ion-thumbnail to add image in list and we also need dummy data for above list. Lets create folder data in assets and file countries.json. We need to added following dummy data in 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 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 lets edit 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 countries 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.

Ionic list example
<ion-list>
  <ion-item>
    <ion-avatar item-left>
      <img src="https://placehold.it/60?text=A">
    </ion-avatar>
    Arjun
  </ion-item>
  <ion-item>
    <ion-avatar slot="start">
      <img src="https://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="https://placehold.it/60?text=C">
    </ion-avatar>
    Item Avatar slot end
  </ion-item>
</ion-list>
<ion-chip>
  <ion-avatar>
    <img src="https://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="https://placehold.it/100x60?text=F1">
    </ion-thumbnail>
    <ion-label>Apple</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail slot="end">
      <img src="https://placehold.it/100x60?text=F2">
    </ion-thumbnail>
    <ion-label>Banana</ion-label>
  </ion-item>
  <ion-item>
    <ion-thumbnail>
      <img src="https://placehold.it/100x60?text=F3">
    </ion-thumbnail>
    <ion-label>Orange</ion-label>
  </ion-item>
</ion-list>

Ionic Icons list

Ionic have lots of buil icons which are ready to used and we can be displayed it using the component ion-icon with the name of the icon. Here is site of Ionic icon list and check the site for what icon you want to use in your project. https://ionic.io/ionicons. These icon are rremium 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 icon in button, item, list and more. Here we have demonstrate ionic icon in list with it 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 an example of the simple contacts list and another example we have used ion-item-sliding to drag an item to display 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.

ionic-list-item-group
<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-item-sliding
<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 ionic collapsible list by using *ngIf directive and click event. Below the screenshot, we have the Ionic collapsible list. We have used ionic toggle component to toggle isCollapsed to true or false. If isCollapsed is true then we hide list and show list when isCollapsed is false.

ionic collapsible list

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

isCollapsed = false;

Now in our component template add following ngIf condition and list to enable 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

List provide us few properties to configure, like list item with line, no line, margin and rounded corner. Here we have listed list 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, image, and other content inside the ionic items.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top