<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item-sliding *ngFor="let detail of details">
<ion-item>
<h2>{{detail.Fname}} {{detail.Lname}}</h2>
</ion-item>
<ion-item-options side="left" icon-left>
<button ion-button color="primary" (click)="buttonClick(detail)">
<ion-icon name="clipboard"></ion-icon>
Edit
</button>
<button ion-button color="danger" (click)="deleteEmpDetail(detail)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-tabs color="light">
<ion-fab right bottom (click)="addEmployee()">
<button ion-fab mini color="dark">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-tabs>
</ion-content>
I am trying to create an app using Ionic2. This is my home.html page which shows the list of employees. I've added a sliding option to each item that has options to delete and edit. I've also added a search-bar option. But none of it seems to be not working. Please help.
Below code shows correct way to implement search bar and sliding option in list using ionic2.
<ion-header>
<ion-navbar color="primary" no-border-bottom>
<ion-buttons start>
<button ion-button class="navBtnRight" (click)="dismiss()">
<span color="light" showWhen="ios">Cancel</span>
<ion-icon color="light" name="md-close" class="csBigIcon" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Select Anyone
</ion-title>
</ion-navbar>
<ion-toolbar color="primary" no-border-top>
<ion-searchbar [(ngModel)]="searchQuery" (ionInput)="getItems($event)" placeholder="Search">
</ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content class="csGrayBackground">
<ion-list>
<ion-item-sliding *ngFor="let detail of details; let i = index;" class="new-list" #slidingItem>
<a ion-item ion-item detail-push detail-none href="#" (click)="openViewModal(detail, i)">
<h2>{{detail.Fname}} {{detail.Lname}}</h2>
</a>
<ion-item-options side="left">
<button ion-button color="primary" (click)="buttonClick(detail)">
<ion-icon name="clipboard"></ion-icon>
Edit
</button>
<button ion-button color="danger" (click)="deleteEmpDetail(detail)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.