Merge pull request gridstack#2629 from adumesny/master

adumesny · web-flow · commit bf51a1922de6 · 2024-03-08T10:51:10.000-08:00
removeAll() trigger Angular's ngOnDestroy
diff --git a/angular/projects/demo/src/app/app.component.ts b/angular/projects/demo/src/app/app.component.ts
@@ -203,7 +203,7 @@ export class AppComponent implements OnInit {
   }
   public clearGrid() {
     if (!this.gridComp) return;
-    this.gridComp.grid?.removeAll(true);
+    this.gridComp.grid?.removeAll();
   }
   public saveGrid() {
     this.serializedData = this.gridComp?.grid?.save(false, true) as GridStackOptions || ''; // no content, full options
diff --git a/angular/projects/demo/src/app/dummy.component.ts b/angular/projects/demo/src/app/dummy.component.ts
@@ -15,16 +15,15 @@ import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
 export class AComponent extends BaseWidget implements OnDestroy {
   @Input() text: string = 'foo'; // test custom input data
   public override serialize(): NgCompInputs | undefined  { return this.text ? {text: this.text} : undefined; }
-  ngOnDestroy() {
-    console.log('Comp A destroyed'); // test to make sure cleanup happens
-  }
+  ngOnDestroy() { console.log('Comp A destroyed'); } // test to make sure cleanup happens
 }
 
 @Component({
   selector: 'app-b',
   template: 'Comp B',
 })
-export class BComponent extends BaseWidget {
+export class BComponent extends BaseWidget implements OnDestroy {
+  ngOnDestroy() { console.log('Comp B destroyed'); }
 }
 
 @Component({
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [10.1.1-dev (TBD)](#1011-dev-tbd)
 - [10.1.1 (2024-03-03)](#1011-2024-03-03)
 - [10.1.0 (2024-02-04)](#1010-2024-02-04)
 - [10.0.1 (2023-12-10)](#1001-2023-12-10)
@@ -107,6 +108,9 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 10.1.1-dev (TBD)
+* fix: [#2628](https://github.com/gridstack/gridstack.js/issues/2628) `removeAll()` does not trigger Angular's ngOnDestroy 
+
 ## 10.1.1 (2024-03-03)
 * fix: [#2620](https://github.com/gridstack/gridstack.js/pull/2620) allow resizing with sizeToContent:NUMBER is uses 
 
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -554,13 +554,14 @@ export class GridStackEngine {
     return this;
   }
 
-  public removeAll(removeDOM = true): GridStackEngine {
+  public removeAll(removeDOM = true, triggerEvent = true): GridStackEngine {
     delete this._layouts;
     if (!this.nodes.length) return this;
     removeDOM && this.nodes.forEach(n => n._removeDOM = true); // let CB remove actual HTML (used to set _id to null, but then we loose layout info)
-    this.removedNodes = this.nodes;
+    const removedNodes = this.nodes;
+    this.removedNodes = triggerEvent ? removedNodes : [];
     this.nodes = [];
-    return this._notify(this.removedNodes);
+    return this._notify(removedNodes);
   }
 
   /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1201,7 +1201,7 @@ export class GridStack {
       }
       if (!node) return;
 
-      if (GridStack.addRemoveCB) {
+      if (removeDOM && GridStack.addRemoveCB) {
         GridStack.addRemoveCB(this.el, node, false, false);
       }
 
@@ -1225,15 +1225,19 @@ export class GridStack {
   /**
    * Removes all widgets from the grid.
    * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
    */
-  public removeAll(removeDOM = true): GridStack {
+  public removeAll(removeDOM = true, triggerEvent = true): GridStack {
     // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
     this.engine.nodes.forEach(n => {
+      if (removeDOM && GridStack.addRemoveCB) {
+        GridStack.addRemoveCB(this.el, n, false, false);
+      }
       delete n.el.gridstackNode;
       this._removeDD(n.el);
     });
-    this.engine.removeAll(removeDOM);
-    this._triggerRemoveEvent();
+    this.engine.removeAll(removeDOM, triggerEvent);
+    if (triggerEvent) this._triggerRemoveEvent();
     return this;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -203,7 +203,7 @@ export class AppComponent implements OnInit {`
`203`	`203`	`}`
`204`	`204`	`public clearGrid() {`
`205`	`205`	`if (!this.gridComp) return;`
`206`		`- this.gridComp.grid?.removeAll(true);`
	`206`	`+ this.gridComp.grid?.removeAll();`
`207`	`207`	`}`
`208`	`208`	`public saveGrid() {`
`209`	`209`	`this.serializedData = this.gridComp?.grid?.save(false, true) as GridStackOptions \|\| ''; // no content, full options`