Han Che Han Che - 3 years ago 213
TypeScript Question

ionic 2 - item slider - slide to trigger function

I have ionic-item-sliding directives with 3 buttons. 2 (A and B) Appear when I slide left and 1 (button C) on the right.

I want to implement the behavior that the function under button C is triggered when I really drag the item to the far right.

The docs on ionic2 hompage give this code snippet as 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 it on

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

I've getting the behaviour that when I swipe too far, it will call and push the page multiple times (i guess as many events as i'm throwing)

Any suggestions on how to implement this correctly?


Answer Source

You could add a flag to be sure the push() method is executed only once.

import { Component } from "@angular/core";
import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts';

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 the flag
    this.alreadyPushed = false;

    if(this.selectedItem) {
      // Reset the selected item


  ondrag(event, item) {
    let percent = event.getSlidingPercent();
    if (percent > 1 && !this.alreadyPushed) {

      // Store the event to reset it later
      this.selectedItem = event;

      // Set the flag to true
      this.alreadyPushed = true;

      // Push the new page
      this.navCtrl.push(Page1, { param : item });

Also please notice that you should use percent > 1 instead of Math.abs(percent) > 1 so you only push the page when sliding to the right.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download