hi ,
you can use this function to open an item and close others items opned 
<ion-item-sliding #slidingItem *ngFor="let item of list; let i = index" >
<ion-item (click)="open(slidingItem)"
public open(itemSlide) {
if(this.slideListe.length>0)
this.slideListe[0]._setOpenAmount(0);
itemSlide._setOpenAmount(310);
this.slideListe = [];
this.slideListe.push(itemSlide);
}
Does anyone know how to achieve this in Ionic 4 ?
I did this for ionic 4:
click(itemSliding: IonItemSliding) {
itemSliding['el'].style.transitionDuration = '.2s';
itemSliding['el'].style.transform = `translate3d(${(itemSliding['el'].offsetWidth) * -1}px,0,0)`;
}
For Ionic v3, to make it work for just opening or closing an ion-item-sliding on click event without losing any native drag effect, we should apply a combination of previous friends contributions.
HTML
<ion-item-sliding #slide *ngFor="[YOUR NGFOR]">
<ion-item (click)="slidingOnClick(slide, true)">
(...)
</ion-item>
<ion-item-options side="right" (click)="slidingOnClick(slide, false)">
<button ion-button (click)="buttonClick($event)">
TEST
</button>
</ion-item-options>
</ion-item-sliding>
As global:
lastItemSliding: ItemSliding = null;
TS Click Events:
slidingOnClick(itemSlide: any, isShow: boolean): void {
try {
if (isShow) {
if (!this.lastItemSliding || (this.lastItemSliding.item.id != itemSlide.item.id)) {
//Get number of options
let eleRef = itemSlide.item.getElementRef();
let options = eleRef.nativeElement['nextElementSibling']['children'].length;
//Close last item if its not null
if (this.lastItemSliding) { this.lastItemSliding.close(); }
itemSlide.item['opened'] = true;
itemSlide._setOpenAmount([YOUR SLIDE SIZE]);
this.lastItemSliding = itemSlide;
}
else { this.lastItemSliding = null; }
}
else {
if (this.lastItemSliding){
if (this.lastItemSliding.item['opened']){
this.lastItemSliding.close();
}
}
}
}
catch (error) {
console.log(error);
}
}
//Any slide-item-option button should stop propagation to avoid parent event click
buttonClick(evt: Event): void {
evt.stopPropagation();
}
You can also call the open and close methods.
toggle(item: IonItemSliding) {
if (item['el'].classList.contains('item-sliding-active-slide') || item['el'].classList.contains('item-sliding-active-options-end'))
item.close();
else
item.open('end');
}
@fyraux Hello, could you please post the HTML behind this code.
Do you have a button on the ion-item-sliding calling toggle( param? )?
Where do you import {IonItemSliding} from ???
I use this type
import {ItemSliding} from ‘ionic-angular’
There is only .close() but NO .open()
.open() method should have been incorporated way back in 2019/4.
Are you using Ionic 3, 4 or 5?
Thank you.
Hey! I found that it gets opened when clicked, but when I try to close it, it doesn’t work.
It looks like, when the slide options are opened, you are not clicking on the ion-item anymore. You are clicking ion-item-options. So It might be helpfull to add that you have to set the click event on ion-item-options, not on ion-item.
Thanks a lot!
Below code might help
ionic 5
ionic CLI 6.2.1
<div *ngFor="let widget of tab.widgetList">
<ion-item-sliding [disabled]="disableDelete" #sliding>
<ion-item-options side="start">
<ion-item-option >
<ion-button class="button-top-icon" fill="clear">
<ion-icon name="trash" slot="icon-only"></ion-icon>
</ion-button>
</ion-item-option>
</ion-item-options>
<ion-item lines="none" class="transparent default-item ion-no-padding" >
<abc></abc>
</ion-item>
</ion-item-sliding>
</div>
@ViewChildren('sliding') itemSlidingList: QueryList<IonItemSliding>;
deleteWidgets() {
this.disableDelete = false;
this.itemSlidingList.forEach((itemSlide) => {
itemSlide.open('start');
});
}
hi, nileshbandekar,
i would like to double check how do you able to foreach Ion Item Sliding? mine’s got error saying not able to foreach.
this is my questions about similar case
does anyone has an idea?
thank you
