How to work ion-item-sliding with *ngFor?

Question

I'm trying to implement the ion-item-sliding option to create an ion-card that can slide within a flex-box grid. Unfortunately, it doesn't seem to work very well.

To be specific, nothing actually happens! No matter what direction I swipe from, there is no indication of a swipe taking place.

Here is what I have so far:

<ion-content padding>
  <ion-grid>
  <ion-row>
    <ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
    <ion-item-sliding>
    <ion-item>
      <ion-card>
        <img *ngIf="list.color=='#f55f7c'" src="data:image/png;base64,iVBORw0dsfladj=">
        <img *ngIf="list.color=='#ffcb53'" src="data:image/png;base64,iVB5CYII=">
        <img *ngIf="list.color=='#85dec8'" src="data:image/png;base64,iVBORw0KGgoAAAANSU=">
      </ion-card>
    </ion-item>
    </ion-item-sliding>
    
    <ion-item-options side="left">
      <button ion-button>Favorite</button>
      <button ion-button color="danger">Share</button>
    </ion-item-options>
    
    </ion-col>           
   
    <button id="add-bttn" ion-button [navPush]="goNew"><ion-icon name="add"></ion-icon></button>
  </ion-row>      
  </ion-grid>  
</ion-content>

I've tried it with the *ngFor statement placed within the tag and in the tag. No go.

Any help would be enlightening!

Answer 1

Just like you can see in the Docs, the ion-item-options should be within the ion-item-sliding element. Besides, the items should be placed inside of an ion-list container.

So something like this should work:

<ion-content padding>
    <ion-list> <!-- Here I've added the ion-list -->
        <ion-row>
            <ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">

                <ion-item-sliding>

                    <!-- Item -->
                    <ion-item>
                        <ion-card>
                            <img src="https://randomuser.me/api/portraits/men/51.jpg">
                        </ion-card>
                    </ion-item>

                    <!-- Options -->
                    <ion-item-options side="left">
                        <button ion-button>Favorite</button>
                        <button ion-button color="danger">Share</button>
                    </ion-item-options>

                </ion-item-sliding> <!-- This includes the options-->

            </ion-col>           

            <button id="add-bttn" ion-button [navPush]="goNew">
                <ion-icon name="add"></ion-icon>
            </button>

        </ion-row>      
    </ion-list>
</ion-content>

---

Stackblitz project