For Ionic v3, to make it work for just opening or closing an ion-item-sliding on click event without losing any native drag effect, we should apply a combination of previous friends contributions.
HTML
<ion-item-sliding #slide *ngFor="[YOUR NGFOR]">
<ion-item (click)="slidingOnClick(slide, true)">
(...)
</ion-item>
<ion-item-options side="right" (click)="slidingOnClick(slide, false)">
<button ion-button (click)="buttonClick($event)">
TEST
</button>
</ion-item-options>
</ion-item-sliding>
As global:
lastItemSliding: ItemSliding = null;
TS Click Events:
slidingOnClick(itemSlide: any, isShow: boolean): void {
try {
if (isShow) {
if (!this.lastItemSliding || (this.lastItemSliding.item.id != itemSlide.item.id)) {
//Get number of options
let eleRef = itemSlide.item.getElementRef();
let options = eleRef.nativeElement['nextElementSibling']['children'].length;
//Close last item if its not null
if (this.lastItemSliding) { this.lastItemSliding.close(); }
itemSlide.item['opened'] = true;
itemSlide._setOpenAmount([YOUR SLIDE SIZE]);
this.lastItemSliding = itemSlide;
}
else { this.lastItemSliding = null; }
}
else {
if (this.lastItemSliding){
if (this.lastItemSliding.item['opened']){
this.lastItemSliding.close();
}
}
}
}
catch (error) {
console.log(error);
}
}
//Any slide-item-option button should stop propagation to avoid parent event click
buttonClick(evt: Event): void {
evt.stopPropagation();
}