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);
}
del1
February 25, 2019, 9:36pm
23
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();
}
fyraux
January 7, 2020, 5:14pm
26
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');
}
1 Like
@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');
});
}
1 Like
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
hello World,
i have a Div inside let’s say an array of 3 items, each has an ion item sliding delete function at slidingItem.open(‘end’);
i like to click the text "EDIT , and all the 3 items sliding will slide open together.
HTML side :
Edit
<ion-item-sliding (ionDrag)=“isSlided()” #slidingItem lines=“none” *ngFor=“let item of cart”>
<ion-item-option color=“danger” (click)=“removeCartItem (item)”>
Delete
</ion-item-sliding>
[Screenshot 2021-02-22 at 1.16.46 PM]
TS side
shar…
does anyone has an idea?
thank you