Also had the same issue, with a dynamic list of elements, deleting an item with the <ion-item-sliding> component, then refreshing the elements cause it not to be able to delete any other elements until a refresh.

After digging around i noticed that without the refresh of elements it worked fine, looking at the docs there is a method to close all sliding items on the item or on the list. using this fixed the issue.

1. Giving the ion-list an id #dynamicList
2. Accessing that list by the id @ViewChild('dynamicList') dynamicList;
3. On clicking of <ion-item-option> triggering the dynamicList.closeSlidingItems() before deleting the record.

Hope this helps in the meantime, i am new to angular so hopefully i am not doing anything that stupid.

not all heroes wear capes, thx @jcollings for the solution!

html:

 <ion-list #slidingList>
   <ion-item-sliding>
     <ion-item-options side="end">
        <ion-item-option (click)="delete()">
        </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

ts:

 import {List} from '@ionic/angular';

 @ViewChild('slidingList') slidingList: List;
 
 async delete() {
   // something
   await this.slidingList.closeSlidingItems();
 }

I found that another workaround is to pass the reference to the ItemSliding to the delete method and then just closing that one item before deleting the list item:

HTML:

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item>>
      {{item.text}}
    </ion-item>
    <ion-item-options (ionSwipe)="deleteItem(slidingItem, item)">
      <ion-button color="danger" (click)="deleteItem(slidingItem, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS:

async deleteItem(slidingItem: ItemSliding, item: Item) {
    slidingItem.close(); // <-- this is the important bit!
    await this.itemService.deleteItem(item);
  }

I got the same issue. By the way, the sliding items are not working after delete one, need to reload the app

Thanks for this issue! This has been merged in by PR #17492. It will be in the next release: 4.1.0. Please let us know if you are still seeing problems after that.

I’ve donne this : in .html

<ion-item-sliding #slidingItem>
<ion-item-option color="danger" (click)="del(slidingItem,carte)">Supprimer</ion-item-option>
in .ts
import {  IonItemSliding } from '@ionic/angular';

async del(slidingItem: IonItemSliding, carte){
	await slidingItem.close();
	let index = this.cartes.indexOf(carte);
        if(index > -1){
            this.cartes.splice(index, 1);
        }
}

works perfectly Many thanks to @jcollings.

This bug still exist in 4.0.0-rc.2. I use a ion-item-sliding inside virtual-scroll, so I can’t use List.closeSlidingItems(). If I don’t close a item sliding and leave the view using back button or something, then the item sliding stop working next time at all. I can’t use (click) event in this case because I open the sliding and just leave. There is no change to catch (click) event.

Another workaround. It works for me.

in .html
<ion-item-sliding>....</ion-item-sliding>

in .ts
import {  IonItemSliding } from '@ionic/angular';
  @ViewChild(IonItemSliding) itemSliding: IonItemSliding;
   ionViewWillLeave() {
        setTimeout(() => { this.itemSliding.closeOpened(); }, 500);
   }

@bockoblur: I checked out your Stackblitz example and played around with it for a bit. If you actually delete the items from the list, the workaround seems to work fine. If they are merely hidden and then shown again, the behavior is exactly as you described. This seems to be an issue with the transform: translate not being correctly applied to the list item element. Maybe the ItemSliding component still uses the old DOM reference to translate the item. You can find my modified example here: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

This issue is obviously a bug. Remove an item should not need to close it before deleting, it’s funny.

@Anthony2539 probably a bit of both 😜

I don’t know if it’s a feature request or a bug

Some commit regarding slidings have been made recently I think, so maybe the problem is/will disappear

Anyhow, let’s say that workaround works and won’t arm my app I guess

@quynh-ng I have the same issue, i’ve had to downgrade to beta.5 😦