How to create a Gmail style sliding list in ionic2

How to create a Gmail style sliding list in ionic2

So Ionic2 just announced their beta 9 , one of the main features is the introduction of 2 way sliding list items, Today Ill try this out myself and explore it in depth.

ionic start myapp --v2 --ts

Create A blank new Ionic2 App

create a new page called mypage
ionic g page mypage
In App.ts file change root page to your newly created page (for that you need to import it)

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {MypagePage} from './pages/mypage/mypage';

@Component({
template: ''
})
export class MyApp {

private rootPage:any;

constructor(private platform:Platform) {
this.rootPage = MypagePage;

platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}

ionicBootstrap(MyApp)

 

In mypage.html add the default code for item sliding list (grab it from http://ionicframework.com/docs/v2/api/components/item/ItemSliding/)

So Here’s what we are gonna do , We will make the list slide both left and right , left will be for removing a list item and right for liking a list item.

Alright create two tags and change the side attribute to right for liking and left for other one.

Remove the default text of list item (keep it blank , this is more visually appealing we will choose those icons which really communicate with our user and hence they dont need accompanying text – this is a good design principle.

So lets just choose heart for right direction and trash for left direction.

Next we must get our colors right , Its a bad design idea to use green or blue with trash icon , red seems more suitable by default in your core sass style primary , secondary and danger color variables are specified you can choose the default ones or create your own ones, for simplicity I am choosing default ones so

Here is how my code looks

<ion-navbar primary *navbar>
<ion-title >Items</ion-title>
</ion-navbar>

<ion-content padding class=”mypage”>

<ion-list >

<ion-item-sliding *ngFor = “let item of items; let i=index”>
<ion-item >
<ion-icon  md=”md-heart” ></ion-icon>
<h2  >{{ item }}</h2>
</ion-item>
<ion-item-options side=”left”>
<button danger  >
<ion-icon ios=”ios-trash” md=”md-trash”></ion-icon>

</button>
</ion-item-options>

<ion-item-options side=”right”>
<button secondary >
<ion-icon ios=”ios-heart” md=”md-heart”></ion-icon>

</button>

</ion-item-options>

</ion-item-sliding>
</ion-list>

</ion-content>

create an items array in myapp.ts as follows :

items:string[]=['Pasta','Pizza','Chocolate Cake','Noodles','Origami Sheet'];

Now lets just define click event handlers because we dont justwant style we also want some action , so we will have two functions remove() which gets called when user clicks on trash icon and like() which gets called when user clicks on heart icon . ( Obviously we havnt defined these yet but we will now xp)

so open up mypage.ts file and  in class define these functions

private remove=(item,i)=> {

console.log(“removed ” + i );

this.items.splice(i,1);

}

private like=(value:any,i:number)=>{

this.items[i]=”I liked ” + this.items[i];

console.log(“liked ” + i);

}
mypage.html looks something like this

private remove=(item,i)=> {

console.log(“removed ” + i );

this.items.splice(i,1);

}

private like=(value:any,i:number)=>{

this.items[i]=”I liked ” + this.items[i];

console.log(“liked ” + i);

}

Since origami sheet is the odd one lets delete it 🙂

Okay so in our app we used 2 way sliding , and when a user deleted the item gets removed and when user likes the word liked is appended before the item name and immediately see the effects

Note: Please ignore the name of the app (todo’s clearly I planned it for something else xp)

blog_slide_1 blog_slide_2