Cómo detectar gestos tactiles en Angular

Aprende a detectar gestos tactiles en Angular como el swipe, rotate...

19.06.2021 a las 18:12

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.


Saludos 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2