Ionic-framework: ion-item-sliding not working with *ngFor dynamic list

Created on 9 Nov 2016 · 14Comments · Source: ionic-team/ionic-framework

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:

<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

Source

DonShirley

👍3

Most helpful comment

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>

GunaSekhar1 on 24 May 2017

👍8

All 14 comments

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

jkinman on 24 Nov 2016

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.

bholben on 26 Nov 2016

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

DonShirley on 30 Nov 2016

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.

m5rk on 9 Dec 2016

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

spinicrus on 19 Jan 2017

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

manybothans on 24 Jan 2017

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 on 2 May 2017

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

shaneparsons on 4 May 2017

👎1

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>

GunaSekhar1 on 24 May 2017

👍8

@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

yoojene on 28 Jun 2017

👍2

Not working either. In my case, it reveals the options layer but there's no sliding effect at all and the item layer keeps in the same place, under the options one. I realized that transform: translate3d(-30px, 0px, 0px); is being applied to <ion-item>. If it's applied to <item-inner> it works (at least the layer is moved -30px, I don't know if the sliding effect would be correctly applied too).
screenshot-localhost-8100-2017-06-28-15-04-36

It only happens with the *ngFor. If I copy&paste the example from the docs, it works as expected.

My code:

 16 <ion-content>
 17     <div *ngIf="!networkError">
 18         <h5>Bandeja</h5>
 19         <ion-list class="task-list">
 20             <ion-item-sliding *ngFor="let t of tasks">
 21                 <ion-item class="priority-{{ t.priority.level }}" [class.today]="shouldDoToday(t.dueDate)">
 22 
 23                     <!-- Task is pending -->
 24                     <p *ngIf="!t.doneDate" class="date">
 25                         <ion-icon name="icm-priority" class="priority"></ion-icon>
 26                         <span>{{ t.dueDate | amDateFormat: 'dddd LL' }}</span>
 27                     </p>
 28                     <p *ngIf="!t.doneDate" class="title" (click)="saveAsDone(t.id)">
 29                         <ion-icon name="icm-check-empty" class="status"></ion-icon>
 30                         <span>{{ t.title }}</span>
 31                     </p>
 32                     <ion-note *ngIf="!t.doneDate" item-end>
 33                         <ion-icon name="create" class="edit" (click)="goTo('TaskEditPage', { task: t })"></ion-icon>
 34                     </ion-note>
 35 
 36                     <!-- Task is done -->
 37                     <p *ngIf="t.doneDate" class="title done" (click)="saveAsUndone(t.id)">
 38                         <ion-icon name="icm-check" class="status"></ion-icon>
 39                         <span>{{ t.title }}</span>
 40                     </p>
 41                 </ion-item>
 42                 <ion-item-options side="right">                                                                                                                             
 43                     <button ion-button color="danger">
 44                         <ion-icon name="trash"></ion-icon>
 45                     </button>
 46                 </ion-item-options>
 47             </ion-item-sliding>
 48         </ion-list>
 49     </div>
...

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
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.10.0
    OS         : Linux 3.19
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

LufoX11 on 28 Jun 2017

It looks like adding a custom class to <ion-item> broke the thing: class="priority-{{ t.priority.level }}". After removing that, it worked as expected.

LufoX11 on 10 Jul 2017

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!