ion-item-sliding not working with *ngFor dynamic list

[DonShirley]

Short description of the problem:

See code below. Without *ngFor directive the sliding motion to show buttons is working. When using the *ngFor it is not working anymore.

What behavior are you expecting?

Steps to reproduce:

1. run

<ion-content>
   <ion-list>
      <ion-item-divider light>
         24.03.2016
      </ion-item-divider>
      <ion-item-sliding *ngFor="let ticket of ticket_service.tickets_aktuell" #slidingItem>
         <ion-item>
            <p>{{ticket.Name}}</p>
            <p>{{ticket.Street}}, {{ticket.Postalcode}} {{ticket.City}}</p>
         </ion-item>
         <ion-item-options side="right" icon-left>
            <button ion-button color="secondary" (click)="ticket_bearbeiten(ticket)">
               <ion-icon name="construct"></ion-icon>
               Bearbeiten
            </button>
            <button ion-button default (click)="ticket_details(ticket)">
               <ion-icon name="paper"></ion-icon>
               Details
            </button>
         </ion-item-options>
      </ion-item-sliding>
   </ion-list>
</ion-content>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
2.1.4

Run ionic info from terminal/cmd prompt: (paste output below)

---

Your system information:

You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.3.1

Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS:
Node Version: v6.9.1

[jkinman]

Im having the same problem. Did you find a solution to this?

[bholben]

I'm having problems here too. I did find that the *ngFor worked fine when I was doing a list like in the example on the component docs page. However, when I combined this with a list divider and ion-item-group, it broke. I'm running Ionic Framework Version 2.0.0-rc.3.

[DonShirley]

I changed to using <ion-list-header> instead of <ion-item-divider> and did some CSS styling. It's working for me right now.

[m5rk]

I ran into a similar issue: sliding options stopped working with the RC3 upgrade, but only on Android. I reverted to RC2 and sliding options works once again.

[spinicrus]

same here, android.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45

[manybothans]

also seeing it on iOS 10.2

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[shaneparsons]

I'm also having this problem on Android.

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.2 Build version 8E2002

[shaneparsons]

@brandyscarney any progress on this? Any workarounds other than not using the sliding lists?

[GunaSekhar1]

The below code worked for me. Hope it works for you also.

<ion-list>
    <ion-item-sliding *ngFor="let eachRecipe of allRecipes">
      <ion-item (click)="onItem(eachRecipe, 'favourite')">
        <img class="wid-hi-50" src="{{eachRecipe.pictures_link}}">
        <div>
          <p>{{eachRecipe.courses}}</p>
          <h2>{{eachRecipe.title}}</h2>
        </div>
        <ion-icon class="ios-add-size icon icon-md ios-arrow-forward"></ion-icon>
      </ion-item>
      <ion-item-options side="right">
       <!-- <button danger (click)="dragAndDrop()" ion-button><ion-icon name="trash"></ion-icon> Delete</button> -->
       <button danger (click)="removeItem(eachRecipe)" ion-button color="danger"><ion-icon name="trash"></ion-icon> Delete</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

[yoojene]

@GunaSekhar1's solution works well, moving the *ngFor up one level from <ion-item> to <ion-item-sliding>

$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.7.1
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 4.1.2