Skip to content

Remove Hammer.js dependency and implement native gesture support #17358

Description

@ChronosSF

The library currently depends on Hammer.js (hammerjs + @types/hammerjs) for touch gesture support in several components. This dependency is a maintenance burden — it is effectively unmaintained (last release in 2019), requires a separate script tag / import in the consuming application, and needs a custom HammerGesturesManager wrapper in the library core. All the gestures it provides can be replaced with native Pointer Events / Touch Events APIs that are now universally supported in modern browsers.

Affected Components & Events

Component / File Hammer Events Used
Carousel (carousel/src/carousel/carousel.component.ts) tap, panleft, panright, panup, pandown, panend
Navigation Drawer (navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts) swipe, panstart, panmove, panend
List Item (list/src/list/list-item.component.ts) panstart, pancancel, panmove, panend
Time Picker directive (time-picker/src/time-picker/time-picker.directives.ts) pan (vertical, DIRECTION_VERTICAL)
Grid Cell (grids/core/src/cell.component.ts) doubletap
Grid Expandable Cell (grids/grid/src/expandable-cell.component.ts) inherits doubletap from Grid Cell
Hierarchical Grid Cell (grids/hierarchical-grid/src/hierarchical-cell.component.ts) inherits doubletap from Grid Cell
Tree Grid Cell (grids/tree-grid/src/tree-cell.component.ts) inherits doubletap from Grid Cell

Central abstractions to remove / replace

File Role
core/src/core/touch.ts HammerGesturesManager service — wraps Hammer Manager lifecycle
core/src/core/touch-annotations.ts Stripped-down Hammer.js TypeScript interfaces
schematics/utils/dependency-handler.ts ng-add schematic that installs hammerjs / @types/hammerjs and patches angular.json

Subtasks

  1. Carousel — Replace HammerGesturesManager listeners for tap, panleft, panright, panup, pandown, panend with native pointerdown / pointermove / pointerup / pointercancel tracking + a click guard for the tap.
  2. Navigation Drawer — Replace swipe, panstart, panmove, panend global document listeners with native pointer/touch event listeners that replicate the drag-open/drag-close behavior.
  3. List Item — Replace @HostListener('panstart/pancancel/panmove/panend') bindings with native pointer event handlers implementing the same pan-state machine.
  4. Time Picker directive — Replace vertical pan listener with a pointermove handler that tracks vertical delta between pointerdown and pointerup.
  5. Grid Cells — Replace the doubletap Hammer event with a native double-click / double-tap implementation (two pointerup events within a short time threshold on the same target).
  6. Remove HammerGesturesManager and touch-annotations.ts from core once no component references them; update core/index.ts exports accordingly.
  7. Update ng-add schematic (dependency-handler.ts) — remove hammerjs / @types/hammerjs install logic and the addHammerToConfig step; update the schematic options.ts interface (remove addHammer option).
  8. Remove hammerjs and @types/hammerjs from package.json peer/dev dependencies.
  9. Update tests — remove all Hammer-related test setup (hammerjs import, HammerGesturesManager mocking) from spec files.
  10. Update CHANGELOG and documentation — note the removal of the Hammer.js peer dependency as a breaking change and provide a migration note.
  11. Create ng update migration schematic — to clean up any import 'hammerjs' lines and scripts entries from consuming application angular.json files.

Metadata

Metadata

Type

No fields configured for Task.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions