HammerJs and Change Detection

[Ste35]

Hi!

I've seen this issue (and its corresponding commit) and tried to install the package, but I've noticed that the problem seemed to still be there. So I tried to reproduce it and found a possible issue with HammerJs.

If we use the package without hammerjs (we can tell it because in console there is the warn [NgxImageCropper] Could not find HammerJs - Pinch Gesture won't work) everything works fine (the cd is triggered only when moving the cropper area), but if we import HammerJs, the cd is triggered on every mouse move, even if there is no image selected.

I've tried directly importing hammer with import 'hammerjs' and with the provider as suggested in the demo (I added a ts-ignore because the compiler complains that Could not find a declaration file for module 'hammerjs'., I don't know if that can cause the issue...):

ngx-image-cropper/projects/demo-app/src/app/app.module.ts

Lines 18 to 20 in 8962bea

	providers: [
	{provide: HAMMER_LOADER, useValue: () => import('hammerjs')}
	],

You can see a reproduction here: https://stackblitz.com/edit/image-cropper-h1osyc?file=src%2Fapp.component.ts (just move the mouse in the stackblitz area, even before selecting any image and that should trigger the DoCheck hook).

Am I missing something or importing hammerjs in the wrong way?

Thank you for your work!

[Mawi137]

This seems to be an issue in Angular itself: angular/angular#42569
So if you want to use the pinch gesture, I guess the only way to optimize it is to make sure you use OnPush for all components.