Cómo detectar gestos tactiles en Angular

A continuación te explicaré como detectar los gestos tactiles con Angular.

Usaremos la librería de Hammer JS

1. Instalar la librería en nuestro proyecto de Angular, para ello:

   npm i hammerjs

   Si quieres obtener más información acerca del paquete puedes visitar su sitio oficial aquí

2. Importar en el fichero main.ts la librería:

   import 'hammerjs'

3. En el fichero app.module.ts importar HammerModule, HAMMER_GESTURE_CONFIG y HammerGestureConfig, para ello añadir en el app.module.ts:

     import {
       BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig    
       } from '@angular/platform-browser';
     

   En los imports del app.module.ts, importar el HammerModule

   imports: [ ..., HammerModule ]

   En los providers añadir el objeto provide:HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig, quedarían los providers:

   providers: [
     ...,
     { provide:HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig }
   ],
   

4. En el componente que queramos detectar el gesto táctil añadir el evento asociado al gesto, algunos eventos que puedes capturar son:

   • swipeleft
   • panright
   • rotatestart
   • pinchtop
   • pressup
   • ...

   Puedes ver todos los eventos a capturar aquí. 👈

   
   

   Un ejemplo en un componente imagen en Angular quedaría:

   <img
     class="img"
     [src]="r.img"
     loading="lazy"
     width="100"
     alt="Imagen del residente"
     (swipeleft)="swipe($event.type, indexResident)"
     (swiperight)="swipe($event.type, indexResident)"
     cdkDragLockAxis="x"
     cdkDragBoundary=".residente"
     cdkDrag
   />
   

Activando gestos que no lo están por defecto

Hay gestos que no están activados por defecto, por ejemplo el swipeto y el swipedown.

Para activarlos:
1. Crear una nueva clase que llamaremos HammerConfig

2. import { Injectable } from '@angular/core';
   import * as Hammer from 'hammerjs';
   @Injectable()
   export class HammerConfig extends HammerGestureConfig {
     overrides = <any>{
       swipe: { direction: Hammer.DIRECTION_ALL }
     };
   }
   

3. En los providers del app.module.ts usaremos la nueva clase 👉 providers: [{provide:HAMMER_GESTURE_CONFIG, useClass: HammerConfig}]

Cualquier duda dímela, te contasteré tan rápido como me sea posible.

Hasta luego 🖖