fix: Time performance (#3166)

libs/core/src/lib/utils/directives/carousel/carousel.directive.ts

@@ -6,6 +6,7 @@ import {
     ElementRef,
     EventEmitter,
     Input,
+    OnDestroy,
     Output,
     QueryList
 } from '@angular/core';
@@ -40,7 +41,7 @@ export const DEFAULT_TRANSITION_DURATION = '150ms';
         class: 'fd-carousel'
     }
 })
-export class CarouselDirective implements AfterContentInit {
+export class CarouselDirective implements AfterContentInit, OnDestroy {
 
     /** Configuration for carousel */
     @Input()
@@ -74,6 +75,9 @@ export class CarouselDirective implements AfterContentInit {
     /** @hidden */
     private _currentTransitionPx = 0;
 
+    /** @hidden */
+    private _hammer: Hammer = null;
+
     /** @hidden */
     constructor(
         private _elementRef: ElementRef,
@@ -87,6 +91,13 @@ export class CarouselDirective implements AfterContentInit {
         }
     }
 
+    /** @hidden */
+    ngOnDestroy(): void {
+        if (this._hammer) {
+            this._hammer.destroy();
+        }
+    }
+
     /** Change active element */
     goToItem(item: CarouselItemDirective, smooth?: boolean): void {
         let index: number = this.getIndexOfItem(item);
@@ -210,18 +221,18 @@ export class CarouselDirective implements AfterContentInit {
 
     /** @hidden */
     private _hammerSetup(): void {
-        const hammer = new Hammer(this._elementRef.nativeElement, new HammerConfig());
+        this._hammer = new Hammer(this._elementRef.nativeElement, new HammerConfig());
 
-        hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+        this._hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
 
         if (this.config.vertical) {
-            hammer.on('panmove', (event) => this._handlePan(event.deltaY));
-            hammer.on('panstart', () => this._handlePanStart());
-            hammer.on('panend', (event) => this._handlePanEnd(event.deltaY));
+            this._hammer.on('panmove', (event) => this._handlePan(event.deltaY));
+            this._hammer.on('panstart', () => this._handlePanStart());
+            this._hammer.on('panend', (event) => this._handlePanEnd(event.deltaY));
         } else {
-            hammer.on('panmove', (event) => this._handlePan(event.deltaX));
-            hammer.on('panstart', () => this._handlePanStart());
-            hammer.on('panend', (event) => this._handlePanEnd(event.deltaX));
+            this._hammer.on('panmove', (event) => this._handlePan(event.deltaX));
+            this._hammer.on('panstart', () => this._handlePanStart());
+            this._hammer.on('panend', (event) => this._handlePanEnd(event.deltaX));
         }
     }