angular - ionic 2 - item slider - slide to trigger function -

i have ionic-item-sliding directives 3 buttons. 2 (a , b) appear when slide left , 1 (button c) on right.

i want implement behavior function under button c triggered when drag item far right.

the docs on ionic2 hompage give code snippet example

ondrag(event, item) {   let percent = event.getslidingpercent();   if (percent > 0) {     // positive     console.log('right side');   } else {     // negative     console.log('left side');   }   if (math.abs(percent) > 1) {         this.navctrl.push(nextpage,{param:item},{ animate: true, direction: 'forward' })   } } 

using on

<ion-item-sliding *ngfor="let item of items "(iondrag)="ondrag($event, item)"></ion-item-sliding> 

i've getting behaviour when swipe far, call , push page multiple times (i guess many events i'm throwing)

any suggestions on how implement correctly?

thanks!

you add flag sure push() method executed once.

import { component } "@angular/core"; import { navcontroller } 'ionic-angular/index'; import { page1 } 'page1.ts';  @component({      templateurl:"home.html" }) export class homepage {    private alreadypushed: boolean;    private items: array<any>;    private selecteditem: any;    constructor(private navctrl: navcontroller) {     this.items = [       'city of amsterdam',       'city of bogota',       'city of buenos aires',       'city of dhaka'     ];   }    ionviewdidenter() {     // initialize flag     this.alreadypushed = false;      if(this.selecteditem) {       // reset selected item       this.selecteditem._setopenamount(0);     }    }    ondrag(event, item) {     let percent = event.getslidingpercent();     if (percent > 1 && !this.alreadypushed) {        // store event reset later       this.selecteditem = event;        // set flag true       this.alreadypushed = true;        // push new page       this.navctrl.push(page1, { param : item });     }   } } 

also please notice should use percent > 1 instead of math.abs(percent) > 1 push page when sliding right.