CODEWITHSUNDEEP
angularionic-frameworkionic4
BizzyBob
BizzyBob

Reputation: 14750

Ionic 4: How to Suppress Click action on <ion-sliding-item> when items are open?

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.

screenshot of slider open revealing delete option

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?

StackBlitz of issue

Upvotes: 2

Views: 5110

Answers (2)

Rzvn
Rzvn

Reputation: 11

Hei guys

<ion-item-sliding #itemSliding *ngFor="elemets..." (touchmove)="itemSliding.open('end');">

this is the solution :)

Upvotes: 0

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

You are getting false because the context is wrong when you click.

closeSlidingItems() Returns true if an actual ion-item-sliding is closed

Here is a method from docs:

  async closeSlidingItems(): Promise<boolean> {
    const item = this.el.querySelector('ion-item-sliding');
    if (item && item.closeOpened) {
      return item.closeOpened();
    }
    return false;
  }

this.el.querySelector('ion-item-sliding') gives you only the first matching ion-item-sliding in this context. And it is not the same which is currently open (because you cick on the different ion-item-sliding).

So there is no default way, AFAIK, to do what you want. However, IonItemSliding component exposes ionDrag event, which is triggered when you slide the item. That event has detail.ratio property, which becomes 1 when ion-item-options is open. So you could relay on this, by reseting ration value every time you click goToDetail(). 

<ion-item-sliding (ionDrag)="dragEvent($event.detail.ratio)" *ngFor="let message of messages">

Upvotes: 1

Related Questions