fix(resizeable): fix memory leak due to created element not cleaned up (swimlane#1792)

Author: macjohnny

projects/swimlane/ngx-datatable/src/lib/components/header/header.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   HostBinding,
   ChangeDetectorRef,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy, OnDestroy
 } from '@angular/core';
 import { MouseEvent } from '../../events';
 import { columnsByPin, columnGroupWidths, columnsByPinArr } from '../../utils/column';
@@ -68,7 +68,7 @@ import { translateXY } from '../../utils/translate';
   },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DataTableHeaderComponent {
+export class DataTableHeaderComponent implements OnDestroy {
   @Input() sortAscendingIcon: any;
   @Input() sortDescendingIcon: any;
   @Input() scrollbarH: boolean;
@@ -158,8 +158,14 @@ export class DataTableHeaderComponent {
     right: {}
   };
 
+  private destroyed = false;
+
   constructor(private cd: ChangeDetectorRef) {}
 
+  ngOnDestroy(): void {
+    this.destroyed = true;
+  }
+
   onLongPressStart({ event, model }: { event: any; model: any }) {
     model.dragging = true;
     this.dragEventTarget = event;
@@ -303,7 +309,9 @@ export class DataTableHeaderComponent {
     this._styleByGroup.left = this.calcStylesByGroup('left');
     this._styleByGroup.center = this.calcStylesByGroup('center');
     this._styleByGroup.right = this.calcStylesByGroup('right');
-    this.cd.detectChanges();
+    if (!this.destroyed) {
+      this.cd.detectChanges();
+    }
   }
 
   calcStylesByGroup(group: string): any {

projects/swimlane/ngx-datatable/src/lib/directives/resizeable.directive.ts

@@ -29,24 +29,30 @@ export class ResizeableDirective implements OnDestroy, AfterViewInit {
   element: HTMLElement;
   subscription: Subscription;
   resizing: boolean = false;
+  private resizeHandle: HTMLElement;
 
   constructor(element: ElementRef, private renderer: Renderer2) {
     this.element = element.nativeElement;
   }
 
   ngAfterViewInit(): void {
     const renderer2 = this.renderer;
-    const node = renderer2.createElement('span');
+    this.resizeHandle = renderer2.createElement('span');
     if (this.resizeEnabled) {
-      renderer2.addClass(node, 'resize-handle');
+      renderer2.addClass(this.resizeHandle, 'resize-handle');
     } else {
-      renderer2.addClass(node, 'resize-handle--not-resizable');
+      renderer2.addClass(this.resizeHandle, 'resize-handle--not-resizable');
     }
-    renderer2.appendChild(this.element, node);
+    renderer2.appendChild(this.element, this.resizeHandle);
   }
 
   ngOnDestroy(): void {
     this._destroySubscription();
+    if (this.renderer.destroyNode) {
+      this.renderer.destroyNode(this.resizeHandle);
+    } else {
+      this.renderer.removeChild(this.renderer.parentNode(this.resizeHandle), this.resizeHandle);
+    }
   }
 
   onMouseup(): void {