ngTouch (ng-swipe-left / ng-swipe-right) en Angular moderno

ngTouch no tiene sucesor directo. Los gestos de swipe se escriben con pointer events nativos, normalmente dentro de una directiva pequeña.

<div class="slide"
     ng-swipe-left="vm.next()"
     ng-swipe-right="vm.prev()">
  <img ng-src="{{ vm.current.url }}">
</div>

@Directive({
  selector: '[appSwipe]',
  host: {
    '(pointerdown)': 'startX = $event.clientX',
    '(pointerup)': 'end($event)',
    'style': 'touch-action: pan-y',
  },
})
export class SwipeDirective {
  swipe = output<'left' | 'right'>();
  startX = 0;
  end(e: PointerEvent) {
    const dx = e.clientX - this.startX;
    if (Math.abs(dx) > 40) { this.swipe.emit(dx < 0 ? 'left' : 'right'); }
  }
}

Qué cambia

• Los pointer events cubren mouse, touch y lápiz con una sola API, así que no hay un módulo extra que cargar.
• La propiedad CSS touch-action le indica al navegador qué gestos puede reservar para el scroll; sin ella el navegador puede cancelar la secuencia de pointer events.
• HammerJS ya no tiene mantenimiento, así que evita construir código nuevo de gestos sobre esa librería.

Relacionado

• $resource .$promise and $resolved
• $http cache / $cacheFactory
• jQuery / angular.element in directives
• ng-pluralize