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.

Untitled-1

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.

modified

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.

src/pages/list/list.ts
src/pages/list/list.html

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';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {

  items = [
    'Ionic',
    'AngularJs',
    'Phonegap',
    'PHP',
    'JAVASCRIPT',
    'Laravel',
    'Wordpress',
    'Drupal',
    'Magento',
    'JAVA',
    'C Language',
    'C++',
    '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-header>
    <ion-navbar>
        <ion-title>TheCodingStuff - List View</ion-title>
    </ion-navbar>
</ion-header>

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

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';

@NgModule({
   declarations: [
       ListPage
   ],
   entryComponents: [
       ListPage
   ]
});

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 {

    listPage=ListPage;

}

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>

</ion-content>

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

linkbutton

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.

list

Our listing module is complete.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s