Ionic v4: <ion-reorder-group> not working well with <ion-item-sliding>


I’m playing with ionic v4 and trying to combine reorder with item-sliding to delete a row. It sort of works, but once I reorder a row, the rows which were moved no longer slide. any suggestions? This is what I have against the blank template


  <ion-grid fixed>
      <ion-col size="6">
        <ion-list id="sliding-list-1">
          <ion-text color="primary">&lt;ion-reorder-group&gt; with &lt;ion-item-sliding&gt;</ion-text>
          <ion-reorder-group disabled="false"
            <ion-item-sliding *ngFor="let item of items"
              (click)="close($event, item)">
                <ion-reorder slot="end"></ion-reorder>
                <ion-item-option color="danger" slot="top" (click)="delete($event, item)">
                  <ion-icon name="trash" slot="top"></ion-icon>


export class HomePage {

  public items:string[] = ['dogs', 'cats', 'birds', 'fishes', 'emus'];

  public remove(item:string){
    console.log("reomove: ", item)

  public reorder(ev){
    const {from, to} = ev.detail;
    const log = `${this.items[from]} moved to position ${to}: `;
    this.items.splice(to, 0, this.items.splice(from, 1)[0]);
    console.log(  log, this.items )


  public delete(o, item) {
    this.close(o, item)
    this.items = this.items.filter( v=>v!=item)

  public close(o, item){
    const el = o.currentTarget.closest('ion-item-sliding');
    console.log("Close:", item)

any ideas?


I am struggling with this as well. Did you find a solution?


yes. sorry. there was a bug, but I can’t find it right now. basically, you have to close the slider before you delete. Use something like the following:

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
  changeDetection: ChangeDetectionStrategy.OnPush,
export class HomePage {
// get a reference to the list in your component, 
// e.g. <ion-list #mylist><ion-item-sliding></></>
@ViewChild('mylist') slidingList: List;

remove(item) {
  // close the slidingList before removing the item