Merge pull request #2810 from adumesny/master

ng memory leak

Author: adumesny

angular/projects/demo/src/app/app.component.html

@@ -101,11 +101,11 @@
 </div>
 
 <div *ngIf="show===8">
-  <p>load() memory leak test</p>
+  <p>load() + clear() to memory leak test between the two</p>
   <button (click)="clearGrid()">Clear</button>
-  <button (click)="load(sub0)">load 0</button>
+  <button (click)="load(sub0)">load</button>
   <button (click)="load(sub2)">load 2</button>
-  <gridstack [options]="gridOptionsFull"></gridstack>
+  <gridstack [options]="gridOptions"></gridstack>
 </div>
 
 <div class="grid-container"></div>

angular/projects/demo/src/app/dummy.component.ts

@@ -6,6 +6,10 @@
 // dummy testing component that will be grid items content
 
 import { Component, OnDestroy, Input } from '@angular/core';
+
+// local testing
+// import { BaseWidget } from './base-widget';
+// import { NgCompInputs } from './gridstack.component';
 import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
 
 @Component({

angular/projects/lib/src/lib/gridstack-item.component.ts

@@ -72,7 +72,10 @@ export class GridstackItemComponent implements OnDestroy {
   }
 
   public ngOnDestroy(): void {
-    delete this.ref;
+    this.clearOptions();
+    delete this.childWidget
     delete this.el._gridItemComp;
+    delete this.container;
+    delete this.ref;
   }
 }

angular/projects/lib/src/lib/gridstack.component.ts

@@ -5,8 +5,7 @@
 
 import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
   OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
 import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
@@ -119,8 +118,8 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   private _options?: GridStackOptions;
   private _grid?: GridStack;
+  private _sub: Subscription | undefined;
   private loaded?: boolean;
-  private ngUnsubscribe: Subject<void> = new Subject();
 
   constructor(
     // private readonly zone: NgZone,
@@ -142,21 +141,20 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
   public ngAfterContentInit(): void {
     // track whenever the children list changes and update the layout...
-    this.gridstackItems?.changes
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(() => this.updateAll());
+    this._sub = this.gridstackItems?.changes.subscribe(() => this.updateAll());
     // ...and do this once at least unless we loaded children already
     if (!this.loaded) this.updateAll();
     this.hookEvents(this.grid);
   }
 
   public ngOnDestroy(): void {
-    delete this.ref;
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-    this.grid?.destroy();
+    this.unhookEvents(this._grid);
+    this._sub?.unsubscribe();
+    this._grid?.destroy();
     delete this._grid;
     delete this.el._gridComp;
+    delete this.container;
+    delete this.ref;
   }
 
   /**
@@ -199,6 +197,11 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
       .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
       .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
   }
+
+  private unhookEvents(grid?: GridStack) {
+    if (!grid) return;
+    grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop');
+  }
 }
 
 /**