How to close ion-item-sliding by api?

Ionic Framework ionic-v3
1

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

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();
 }
12 Likes
4

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

1 Like
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.

4 Likes
8

I did this and it works perfectly

<ion-item-sliding line="none" #slidingItem (click)="slidingItem.close()">

So when you click on anywhere on the sliding item whether the buttons or the rest of the sliding item it will always closes it.

if you only wan to close it when a button is clicked then do as @salvatojalva mentioned… works perfectly as well.

1 Like
9

To do it dynamically

Html

// use index of the list to have dynamically have different id's for ion-item-sliding
 <ion-item-sliding *ngFor="let item of items; let i = index; let c = count;" [id]="'slidingItem' + i">
      
      <ion-item [lines]="i === c-1 ? 'none' : 'inset'">
        // your item 
      </ion-item>
      <ion-item-options side="end">
         // here i am passing index
        <ion-item-option (click)="onOptionClicked(i)">
          Option
        </ion-item-option>

      </ion-item-options>
    </ion-item-sliding>

Now in ts file

 onOptionClicked(index: number) {
    const slidingItem = document.getElementById('slidingItem' + index) as any;
    slidingItem.close();
}

Hope this helps!

3 Likes