Merge pull request #2125 from adumesny/master

more angular updates

Author: adumesny

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

@@ -3,9 +3,11 @@
   <p>Pick a sample test case to load:</p>
   <button (click)="show=0">Simple</button>
   <button (click)="show=1">ngFor case</button>
+  <button (click)="show=2">ngFor custom command</button>
 </div>
 
 <div class="test-container">
 <angular-simple-test *ngIf="show===0"></angular-simple-test>
 <angular-ng-for-test *ngIf="show===1"></angular-ng-for-test>
+<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>
 </div>

demo/angular/src/app/app.module.ts

@@ -3,13 +3,15 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { AngularNgForTestComponent } from './ngFor';
+import { AngularNgForCmdTestComponent } from './ngFor_cmd';
 import { AngularSimpleComponent } from './simple';
 
 @NgModule({
   declarations: [
     AppComponent,
     AngularSimpleComponent,
     AngularNgForTestComponent,
+    AngularNgForCmdTestComponent,
   ],
   imports: [
     BrowserModule

demo/angular/src/app/ngFor.ts

@@ -60,19 +60,14 @@ export class AngularNgForTestComponent implements AfterViewInit {
       margin: 5,
       float: true,
     })
-    // Optional: called when widgets are changed (moved/resized/added) - update our list to match ?
-    .on('change added', (event, list) => {
-      setTimeout(() => { // prevent added items from ExpressionChangedAfterItHasBeenCheckedError
-        (list as GridStackNode[]).forEach(n => {
-          const item = this._items.find(i => i.id === n.id);
-          if (item) Utils.copyPos(item, n);
-        })
-      }, 0);
-    });
+    .on('change added', (event, list) => this.onChange(list as GridStackNode[]));
+
+    // sync initial actual valued rendered (in case init() had to merge conflicts)
+    this.onChange();
 
     /**
      * this is called when the list of items changes - get a list of nodes and
-     * update the layout accordingly (which will take care of adding/removing/updating items to match DOM done by Angular)
+     * update the layout accordingly (which will take care of adding/removing items changed by Angular)
      */
     this.gridstackItems.changes.subscribe(() => {
       const layout: GridStackWidget[] = [];
@@ -84,10 +79,24 @@ export class AngularNgForTestComponent implements AfterViewInit {
     })
   }
 
+  /** Optional: called when given widgets are changed (moved/resized/added) - update our list to match.
+   * Note this is not strictly necessary as demo works without this
+   */
+  public onChange(list = this.grid.engine.nodes) {
+    setTimeout(() => // prevent new 'added' items from ExpressionChangedAfterItHasBeenCheckedError. TODO: find cleaner way to sync outside Angular change detection ?
+      list.forEach(n => {
+        const item = this._items.find(i => i.id === n.id);
+        if (item) Utils.copyPos(item, n);
+      })
+    , 0);
+  }
+
   /**
    * CRUD operations
    */
   public add() {
+    // new array doesn't seem required. Angular seem to detect changes to content...
+    // this.items = [...this.items, { x: 3, y: 0, w: 3, id: String(ids++) }];
     this.items.push({ x: 3, y: 0, w: 3, id: String(ids++) });
   }
 
@@ -96,13 +105,13 @@ export class AngularNgForTestComponent implements AfterViewInit {
   }
 
   public change() {
-    // this.items[0].w = 2; // this will not update GS internal data, only DOM values even thought array doesn't grow/shrink, so call GS update()
+    // this.items[0]?.w = 2; // this will not update GS internal data, only DOM values even thought array doesn't grow/shrink. Need to call GS update()
     const n = this.grid.engine.nodes[0];
     if (n) this.grid.update(n.el!, { w: 2 });
   }
 
   // ngFor unique node id to have correct match between our items used and GS
-  identify(i: number, w: GridStackWidget) {
+  identify(index: number, w: GridStackWidget) {
     return w.id;
   }
 }

demo/angular/src/app/ngFor_cmd.ts

@@ -42,7 +42,7 @@ import { GridStack, GridStackWidget } from 'gridstack';
     `,
   ],
 })
-export class AngularNgForTestComponent implements AfterViewInit {
+export class AngularNgForCmdTestComponent implements AfterViewInit {
   @ViewChildren("gridStackItem") gridstackItems!: QueryList<any>;
   @Input() public items: GridStackWidget[] = [
     { x: 0, y: 0, w: 1, h: 1 },
@@ -71,13 +71,17 @@ export class AngularNgForTestComponent implements AfterViewInit {
         if (widgetToMake.action === "add") {
           this.grid.makeWidget(`#${widgetToMake.id}`);
         } else if (widgetToMake.action === "remove") {
-          const removeEl = this.grid
-            .getGridItems()
-            .find((el) => el.id === `${widgetToMake.id}`);
-          this.grid.removeWidget(removeEl!);
+          const id = String(widgetToMake.id);
+          // Note: DOM element has been removed by Angular already so look for it through the engine node list
+          const removeEl = this.grid.engine.nodes.find((n) => n.el?.id === id)?.el;
+          if (removeEl) this.grid.removeWidget(removeEl);
         }
       }
     );
+
+    // TODO: the problem with this code is that our items list does NOT reflect changes made by GS (user directly changing, or conflict)
+    // and believe the other ngFor example (which does track changes) is also cleaner as it doesn't require special action commands
+    // and track both changes to happen using zip().
   }
 
   /**

demo/index.html

@@ -32,13 +32,14 @@ <h1>Demos</h1>
     <li><a href="web2.html">Website demo 2</a></li>
   </ul>
   <h1>Angular src Demos</h1>
-  <p>these are complete Angular projects with multiple options. use `yarn` and `yarn start` in demo/angular sub-project to build</p>
-  <ul>
+  <p>these are complete Angular projects with multiple options. use `yarn` and `yarn start` in demo/angular sub-project to run them</p>
+  <p>You can find the complete source at <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular" target="_blank">Angular Demo</a></p>
+  <ol>
     <li><a href="angular/src/app/simple.ts">simple.ts</a></li>
     <li><a href="angular/src/app/ngFor.ts">ngFor.ts</a></li>
-  </ul>
+  </ol>
   <h1>Old v5.1.1 Jquery Demos</h1>
-  Note: those are no longer supported, and use a old version of the lib.
+  Note: those are no longer supported, and use an old version of the lib to compare functionality.
   <ul>
     <li><a href="old_two-jq.html">Two grids</a></li>
     <li><a href="old_nested-jq.html">Nested grids</a></li>