1

What is the proper way to use Angular Material without Hammerjs?

I don't wan't HammerJS. It is creating weird behavior (switch to another tab) when I drag my mouse inside a Material Tab Group (even when inside an HTML INPUT control) and I definitely don't want such behavior. I cannot select any text displayed inside a Tab Group.

If I don't include hammerjs, Angular complains every time. I don't thing it is a good practice to leave a warning message in my console.

Alex
  • 368
  • 5
  • 17

2 Answers2

5

The docs are pretty clear.

HammerJS is needed for some components

https://material.angular.io/guide/getting-started

"Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application."

Update - as of Angular 9, hammerJS is optional

Andrew Allen
  • 6,512
  • 5
  • 30
  • 73
  • or put it this way. How do I disable it, in other words, make it non-functional? As far as I understand, hammerjs is translating mouse events to finger events, but it is interfering with my normal mouse events. – Alex Jul 03 '19 at 07:50
  • looks like that is open issue with hammerjs https://github.com/hammerjs/hammer.js/issues/1048 There may be some way using a `provide` to prevent pointer events triggering but that's beyond my ability – Andrew Allen Jul 03 '19 at 07:57
  • @alex Out of curiousity does using answer here help? https://stackoverflow.com/a/49020106/4711754 – Andrew Allen Jul 03 '19 at 09:25
  • I tried and am embarrassed to find out I cannot reproduce the problem. I implemented the changes, the mouse is no longer scrolling my tabs. Good. Then I remove the changes, the mouse is still not interfering with my material tabs. I don't understand why, because I definitely have experienced tabs scrolled by mouse movement recently, definitely even after upgraded to Angular 8. – Alex Jul 08 '19 at 04:04
1

As of Angular Material v12, HammerJS is not required and not even mentioned in the Getting Started guide.

Yuri
  • 4,254
  • 1
  • 29
  • 46