Ionic 3: This directive is used with <ion-item-sliding> tag to enable clicking to see the option buttons seen when swiping.

click-for-options.ts

import {Directive, ElementRef, Renderer2} from '@angular/core';

/**
 * This directive is used with <ion-item-sliding> tag to enable clicking to see
 * the option buttons seen when swiping.
 */
@Directive({
  selector: '[click-for-options]',
  host: {
    '(click)': 'toggleOptions()',
  }

})
export class ClickForOptionsDirective {

  constructor(public element: ElementRef, public renderer: Renderer2) {
  }

  toggleOptions() {
    let item = this.element.nativeElement.firstElementChild;
    let isOptionsOpen: boolean = this.element.nativeElement.classList.contains('active-options-right');
    if (isOptionsOpen) {
      this.renderer.removeClass(this.element.nativeElement, 'active-options-right');
      this.renderer.removeClass(this.element.nativeElement, 'active-swipe-right');
      this.renderer.removeStyle(item, 'transition');
      this.renderer.removeStyle(item, 'transform');
    } else {
      this.renderer.addClass(this.element.nativeElement, 'active-slide');
      this.renderer.addClass(this.element.nativeElement, 'active-options-right');
      this.renderer.setStyle(item, 'transition', null);
      this.renderer.setStyle(item, 'transform', 'translate3d(-' + 169 + 'px, 0px, 0px)');
    }
  }
}