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

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