IONIC3 - Trigger IonItemSliding using click event

_ionic3_ionitemsliding_click_event.MD

Trigger IonItemSliding using click event

Only swipe events available for IonItemSliding by default. So, here the idea to add click event.

Credits

• My Ionic Market
• My Blog
• Ionic Community Forums

page.html

<!--
  Generated template for the EventListingPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>My Page</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
 <ion-list>
  <ion-item-sliding #slidingItem *ngFor="...">
   <ion-item #item (click)="openOption(slidingItem, item)">
    Item
   </ion-item>
   <ion-item-options side="right" (click)="closeOption()">
    <a [href]="..." icon-left clear ion-button item-right>
     <ion-icon name="call"></ion-icon>
     Open Url
    </a>
   </ion-item-options>
  </ion-item-sliding>
 </ion-list>
</ion-content>

page.ts

import { Component } from '@angular/core';
import { ..., Item, ItemSliding } from 'ionic-angular';

/**
 * Generated class for the EventListingPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
...
})
export class MyPage {
  
  ...

  activeItemSliding: ItemSliding = null;

  constructor(...) {
    ...
  }

  ionViewDidLoad() {
    ...
  }

  ...

  openOption(itemSlide: ItemSliding, item: Item) {
   console.log('opening item slide..');
   
   if(this.activeItemSliding!==null) //use this if only one active sliding item allowed
    this.closeOption();

   this.activeItemSliding = itemSlide;

   let swipeAmount = 194; //set your required swipe amount

   itemSlide.startSliding(swipeAmount);
   itemSlide.moveSliding(swipeAmount);

   itemSlide.setElementClass('active-options-right', true);
   itemSlide.setElementClass('active-swipe-right', true);

   item.setElementStyle('transition', null);
   item.setElementStyle('transform', 'translate3d(-'+swipeAmount+'px, 0px, 0px)');
  }

  closeOption() {
   console.log('closing item slide..');

   if(this.activeItemSliding) {
    this.activeItemSliding.close();
    this.activeItemSliding = null;
   }
  }
  
  ...
}

please update this with ionic 4.0.0 now!

Thanks.