ionic 3 Close ion-item-sliding

Issue

I have a sliding item that when you swipe it open, it reveals a submit button.

After you hit submit, I would like for the button to close and hide the "submit". I can't seem to find any documentation for closing sliding elements that relate to buttons or any hacks around it. Any suggestions? Working in Ionic 3...

Solution

Just like you can see in the docs:

Close the sliding item. Items can also be closed from the List.

The sliding item can be closed by grabbing a reference to ItemSliding. In the below example, the template reference variable slidingItem is placed on the element and passed to the share method.

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

And then:

import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

Answered By - sebaferreras