How to implement swiping ion-items in Ionic without clicking?

Issue

I am trying to implement an ion-list with ion-items that are swipable but don’t have to be clicked on the side to trigger an event.

It should work like like the default contacts app on Samsung phones, where you can either swipe left to call or right to send a SMS.

The list in the parent page looks like this:

<ion-list *ngFor="let person of persons | filter:searchTerm">
   <app-person-entry [person]="person" (click)="openModal(person)"></app-person-entry>
</ion-list>

The person-entry component looks like this:

<ion-item>
  <ion-avatar slot="start">
    <img src={{person.icon}}>
  </ion-avatar>
  <div>
    <div class="container">
      <ion-label>{{person.lastname}}</ion-label>
      <ion-label>{{person.firstname}}</ion-label>
    </div>
    <div class="container">
      <ion-label>{{person.postalCode}}</ion-label>
      <ion-label>{{person.city}}</ion-label>
      <ion-label>{{person.address}}</ion-label>
    </div>
  </div>
</ion-item>

Solution

you can use ion-item-sliding.
e.g:

<ion-list>
    <ion-item-group #myItemsId>
      <ion-item-sliding (ionSwipe)="swipeEvent($event, myItemsId)">
        <ion-item-options side="start">
          <ion-item-option>CALL</ion-item-option>
        </ion-item-options>

        <ion-item>
          <ion-label>Item Options</ion-label>
        </ion-item>


        <ion-item-options side="end">
          <ion-item-option>SMS</ion-item-option>
        </ion-item-options>

      </ion-item-sliding>
    </ion-item-group>
  </ion-list>

.ts:

swipeEvent($event, item) {
    console.log($event)
    if ($event.detail.side == 'start') {
      console.log('call now');
      this.closeAllItems(item)
    } else {
      console.log('SMS now');
      this.closeAllItems(item)
    }
  }

  closeAllItems(item) {
    let a = Array.prototype.slice.call(item.el.children)
    a.map((val) => {
      val.close();
    })
  }

Answered By – Najam Us Saqib

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0