[Feature Request] Programmatically slide an ion-item-sliding

Short description of the problem:

I would like to have a way to slide an item to open programmatically. It is not always intuitive to users the slide movement, but a button with an action that animates the slide could help to show how. To enable that, a public version of something like fireSwipeEventwould would help.

What behavior are you expecting?

I would like to have a method like slide() or open() that animate the ion-item-sliding to reveal the ion-item-options of that item.

Which Ionic Version? 2.x

[adamduren]

For anyone looking to do this I found a way that is working quite well for me. It is behaving the same as the default drag method. Code is below. The HTML has extraneous markup but this has allowed me to put a more icon at the end of each item which is the click handler to programmatically open the item.

    <ion-item-sliding #slidingItem (tap)="slidingItem.close()">
        <ion-item>
          <ion-row>
            <ion-col col-auto>
              {{ item.date | date:'shortTime' }}
            </ion-col>
            <ion-col>
              {{ item.description }}
            </ion-col>
            <ion-col text-right>
              <button ion-button clear large (click)="openSlidingItem($event, slidingItem)">
                <ion-icon name="more"></ion-icon>
              </button>
            </ion-col>
          </ion-row>
        </ion-item>
        <ion-item-options>
          <button ion-button expandable type="button">
            Undo
          </button>
        </ion-item-options>
      </ion-item-sliding>

import { Component, ViewChildren, QueryList } from '@angular/core';
import { IonicPage, ItemSliding } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-my-page',
  templateUrl: 'my-page.html',
})
export class MyPage {
  @ViewChildren(ItemSliding) private slidingItems: QueryList<ItemSliding>;

  public openSlidingItem($event: Event, item: any) {
    // This is to prevent a call to itemSliding.close() in the template
    $event.stopPropagation();

    // Close all other open items to have behavior similar to the drag method
    this.closeAllItems();

    // In order for the width of the buttons to be calculated the item
    // must be slightly opened
    item._setOpenAmount(1);

    setTimeout(() => {
      const children = Array.from(
        // use _leftOptions if buttons are on the left (could be made to be dynamic)
        item._rightOptions._elementRef.nativeElement.children,
      );
      // Calculate the width of all of the buttons
      const width = children.reduce(
        (acc: number, child: HTMLElement) => acc + child.offsetWidth,
        0,
      );

      // Open to the calculated width
      item.moveSliding(width);
      item._setOpenAmount(width, false);
    }, 0);
  }

  private closeAllItems() {
    this.slidingItems.map(item => item.close());
  }
}

[ehorodyski]

This is a pretty common UX scenario. Often times users will not know what is a slide-able item and it helps to animate the process the first time the user interacts with the view.