How to close ion-item-sliding by api?


#1

After a <ion-item-sliding> is slide opened, is there an API to close it?


Item-sliding: how to slide back to right?
#2

I am curious about this as well. Don’t see anything in the docs.


#3

I don’t think it’s well documented. I ended up digging through the sample conference app and found the hidden solution.

First add #slidingItem in your ion-sliding-item and you can pass slidingItem to you function. For example.

<ion-item-sliding #slidingItem>
    <ion-item (click)="doSomething(slidingItem)">
    ...
</ion-item-sliding>

And then in you class, you call close() to close.

doSomething(slidingItem) {
     slidingItem.close();
 }

#4

But how would you do that in case of a dynamic list?


#5

I’m looking for the same answer.

I’ve got this list :

<ion-list>
  <ion-item-group reorder="{{flag}}" (ionItemReorder)="reorderItems($event)">
    <ion-item-sliding #item *ngFor="let item of items">
     <ion-item (click)="goToPage(Action1)">
       {{item.id}}
       <p>{{item.label}}</p>
       <p>{{item.points}}</p>
     </ion-item>
     <ion-item-options side="right">
       <button ion-button (click)="always(item)">
         Always
       </button>
       <button ion-button (click)="often(item)">
         Often
       </button>
       <button ion-button (click)="sometimes(item)">
         Sometimes
       </button>
       <button ion-button (click)="rarely(item)">
         Rarely
       </button>
     </ion-item-options>
   </ion-item-sliding>
 </ion-item-group>

</ion-list>

And this .ts

rarely(item) {
     item.points = 25;
     item.close();
     }

It works but I can’t see text anymore. I just have a blank item I can swipe and close.


#6

I think that your problem lies here:

<ion-item-sliding #item *ngFor="let item of items">

You have duplicate variables. Change either the assignment in the loop or the name of the template reference variable.

I think it’s a bit late to answer this question but nevermind. Someone else might visit this topic and experience the same problem if they copy the solution above.


#7

Old but, if someone needs here’s the code.

       <ion-item-sliding #slidingCase *ngFor="let case of casesList.data" class="{{case.status}}">
          <ion-item  (click)="openItem(case)">
               <h2 class="truncate">{{case.description}}</h2>
          </ion-item>
          <ion-item-options side="right" >
            <button ion-button color="default" (click)="follow(slidingCase, case)">
              <ion-icon name="eye"></ion-icon>{{'FOLLOW' | translate}}
            </button>
          </ion-item-options>
        </ion-item-sliding>

The order of the parameters meters, or that’s why didn’t work with me.

follow(slidingItem: ItemSliding, follow_case: any){
   this.cases.follow(follow_case).
   subscribe((response: any) => {
      let toast = this.toastCtrl.create({
        message: this.followMessage,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
      slidingItem.close();
   }, ()=>{
    let toast = this.toastCtrl.create({
      message: "ERROR",
      duration: 3000,
      position: 'bottom'
    });
    toast.present();
   })
  }

Hope it help to someone.