Angular y HammerJS – Detección Táctil

Últimamente se encuentran muchas librerías de JavaScript con opciones de otorgarle detección de gestos táctiles a un sitio web. Sin embargo, a pesar del universo de popularidad del que gozan ciertos frameworks, pocos son aquellos que se han aventurado a utilizar TypeScript. Es fundamental entender que dicho inconveniente no contribuye a la integración de ciertas librerías en entornos realizados con Angular, sistema que por su ductilidad en la producción de aplicaciones, suele necesitar funciones dedicadas para detectar gestos realizados sobre pantallas táctiles. Lo positivo es que una librería como HammerJS (especializada en la sencilla detección de gestos sobre pantallas) se ha dedicado en este último tiempo a desarrollar sus typings y ya puede emplearse en WebApps realizadas con Angular.

La integración se realiza del modo habitual, teniendo una versión limpia de Angular instalada (lo ideal es crear un nuevo proyecto con Angular-CLI), vamos a instalar HammerJS desde npm:

npm install hammerjs

Posteriormente, instalaremos sus types:

npm install @types/hammerjs

En el componente o service que vamos a utilizar necesitamos importar HammerJS:

import * as Hammer from 'hammerjs';

Ya podremos utilizar las funciones y objetos propios de HammerJS (en el caso de utilizarlo sobre un componente, vamos a tener que correrlo dentro del bloque OnInit). Dejo un repositorio que hemos generado recientemente donde se aprecia una simple integración y un ejemplo de cuatro DIVs con propiedades táctiles: https://github.com/ibuioli/ngTouch.