I’m using an <ion-list>
with <ion-sliding-item>
's. The inner item has a (click)
event (click)="goToDetail(message.id)"
.
<ion-list #messageList>
<ion-item-sliding *ngFor="let message of messages">
<ion-item detail (click)="goToDetail(message.id)">
<ion-label>
{{ message.text }}
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option (click)="confirmDelete(message.id)">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Normally, when the item is clicked, I want the click event to fire.
However, if I slide one of the items, revealing the ‘Delete’ option, then click on a different item, the sliding item closes, then the (click) event of the other item is fired.
I want to prevent this click event. I’ve read the documentation and see the <ion-list>
has a closeSlidingItems()
method. So, I was hoping I could simply change my click event to something like:
(click)="messageList.closeSlidingItems() || goToDetail(message.id)"
But, the closeSlidingItems() method returns a promise, not a boolean. Okay, no problem, I thought to just wrap my goToDetail()
function with this check.
public goToDetail(threadId) {
this.messageList.closeSlidingItems()
.then(sliderWasClosed => {
if (!sliderWasClosed) {
this.nav.navigateForward('app/conversation/' + threadId);
}
});
}
However, what I’m finding is that the promise always returns false
, even when a sliding item is in fact closed. I suspect this is because the close operation happens automatically and by the time my function is called, the item is already closed.
My overall goal is to prevent the (click)
event when sliders are open. My current code would work if the closeSlidingItems()
method would return the proper value.
Is there a way I can prevent this automatic closing of sliding items in order to get the correct result when I call closeSlidingItems()
myself?
Is there another event I should be using besides (click)
?
Any other ideas how I can get this to work?