skip to Main Content
Introduction Ionic Lists View Step By Step.

Introduction Ionic Lists view step by step.

Ionic is a powerful HTML5 SDK that helps you build native mobile apps using web technologies like HTML, CSS, Angular Js and Javascript. Today, we are learning the list view using Ionic component step by step.

I hope you installed Ionic on your local system. If not please install it first.

First of all, we are creating the new ionic app using the command.

ionic start listview blank

Wait some second still creating the new Ionic app. After creating the app let’s go to the application directory.

cd listview

Now, let’s run the ionic application using the command.

ionic serve

After starting the ionic server the application is auto open on your browser if not run the application using http://localhost:8100/ URL. you will see the below screen.


Let’s modify the application title and content of the first screen display.

Let’s open the home.html file from src/pages/home/home.html and modify the content as you want like below.


Now, Let’s start the creating the lists view for our application. For creating the list view first of all we need to create the new list page. So, create the new directory list at the src/pages/list After create the directory create the below files on list directory.


Let’s create the coding for those files. first of all, Open the list.ts file and write the below code.

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

  selector: 'page-list',
  templateUrl: 'list.html',
export class ListPage {

  items = [
    'C Language',
    'C Sharp'

  itemSelected(item: string) {
    console.log("Selected Item", item);


Now, let’s create the coding for our HTML file for render the list view. Let’s open the list.html file.

        <ion-title>TheCodingStuff - List View</ion-title>

<ion-content padding>
        <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
            {{ item }}

After, Creating the lists module we need to register our module to the application. For registering our module open the ser/app/app.module.ts file then register our module like below. First of all, we need to import our module like

import { ListPage } from '../pages/list/list';

   declarations: [
   entryComponents: [

Add your module entry to them declarations and entryComponents like I add. you must append your module entry not removed any existing entry from declarations and entryComponents

After, Register our module please restart the ionic server.

Our module is ready for used. Now, create the link for our module on the home screen. Let’s open the file src/pages/home/home.ts

import { ListPage } from '../list/list';

export class HomePage {



Append the above content into the “home.ts” file. we just import our list module to home module. Now let’s create the Navbar link on “home.html” file Let’s open src/pages/home/home.html file.

<ion-content padding>

    <h2>Welcome to the list view example</h2>

    <button [navPush]="listPage">List</button>


After, adding the link our home screen will look like below.


If you notice the list button will appear on the home screen. Now let’s click on the list button for display the list module screen. After, click on the button you will see the list screen like below.


Our listing module is complete.

If you face any issue after following this tutorial write the comment below.


I am a web designer and developer part-time blogger. Write something on some free time. Find my every day thought here :)

Leave a Reply

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

Back To Top