Merge pull request #2629 from adumesny/master

removeAll() trigger Angular's ngOnDestroy

Author: adumesny

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

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({

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 
 

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.

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;
   }