Swipe Remove Directive for Ionic 3.9.2 - Angular 5.0.3

readme.md

Swipe to remove element directive

example.html

<ion-content padding>
  <h3 ion-text color="primary" text-center>Swipe remove directive</h3>

  <ion-list>
    <button ion-item *ngFor="let item of items; let i=index" (click)="onClick(item)" (swipe-remove)="removeItem($event, i)">
      <ion-thumbnail item-start>
        <img src="http://placehold.it/100">
      </ion-thumbnail>
      <h2>My Neighbor Totoro</h2>
      <p>Hayao Miyazaki • 1988</p>
    </button>
  </ion-list>
</ion-content>

swipe-remove.ts

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

import { Platform, DomController } from 'ionic-angular';
// declare var Hammer: any;

@Directive({
  selector: '[swipe-remove]'
})
export class SwipeRemoveDirective {
  @Output('swipe-remove') removed: EventEmitter<any>;
  el:        HTMLElement;
  threshold: number; 
  width:     number;

  constructor(
    elRef:           ElementRef, 
    public renderer: Renderer2, 
    public domCtrl:  DomController,
    public platform: Platform
  ) {
    this.removed   = new EventEmitter();
    this.el        = elRef.nativeElement;
    this.threshold = this.platform.width()/3;
    this.width     = this.platform.width();
  }

  ngAfterViewInit(){
    this.renderer.setStyle(this.el, 'will-change', 'transform, height');
    this.renderer.setStyle(this.el, 'transform',   'translateX(0px) translateZ(0)');
    this.renderer.setStyle(this.el, 'height',      this.el.clientHeight + 'px');
    this.renderer.setStyle(this.el, 'overflow',    'hidden');
    this.renderer.setStyle(this.el, 'min-height',  'auto');
  }

  @HostListener('pan', ['$event'])
  onPan(e: any) {
    let move = e.deltaX;

    if ( !e.isFinal ) {
      this.domCtrl.write(_ => {
        this.renderer.setStyle(this.el, 'transition',  'all .1s ease');
        this.renderer.setStyle(this.el, 'transform',   `translateX(${move}px) translateZ(0)`);
      });
    } else if ( move <= this.threshold && move >= -this.threshold ) {
      this.domCtrl.write(_ => {
        this.renderer.setStyle(this.el, 'transition', 'all .3s ease-in-out');
        this.renderer.setStyle(this.el, 'transform',  `translateX(0px) translateZ(0)`) 
      });
    } else {
      let dir = e.additionalEvent === "panright" ? this.width : (this.width * -1);
      this.domCtrl.write(_ => {
        this.renderer.setStyle(this.el, 'transition', 'transform .3s ease, height .3s .15s ease');
        this.renderer.setStyle(this.el, 'transform',   `translateX(${dir}px) translateZ(0)`);
        this.renderer.setStyle(this.el, 'height',      '0px');
      });

      setTimeout(() => {
        this.removed.emit(e);
      }, 500);
    }
  }
}