more angular demo tweaks

* showing how new layouts can be created while preserving old items if needed.

Author: adumesny

demo/angular/src/app/ngFor.ts

@@ -15,6 +15,7 @@ let ids = 1;
     <button (click)="add()">add item</button>
     <button (click)="delete()">remove item</button>
     <button (click)="change()">modify item</button>
+    <button (click)="newLayout()">new layout</button>
     <div class="grid-stack">
       <!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items) -->
       <div *ngFor="let n of items; trackBy: identify"
@@ -30,7 +31,7 @@ let ids = 1;
       </div>
     </div>
   `,
-  // gridstack.min.css and other custom styles should be included in global styles.scss
+  // gridstack.min.css and other custom styles should be included in global styles.scss or here
 })
 export class AngularNgForTestComponent implements AfterViewInit {
   /** list of HTML items that we track to know when the DOM has been updated to make/remove GS widgets */
@@ -75,7 +76,7 @@ export class AngularNgForTestComponent implements AfterViewInit {
         const n = ref.nativeElement.gridstackNode || this.grid.makeWidget(ref.nativeElement).gridstackNode;
         if (n) layout.push(n);
       });
-      this.grid.load(layout);
+      this.grid.load(layout); // efficient that does diffs only
     })
   }
 
@@ -95,7 +96,7 @@ export class AngularNgForTestComponent implements AfterViewInit {
    * CRUD operations
    */
   public add() {
-    // new array doesn't seem required. Angular seem to detect changes to content...
+    // new array isn't required as 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++) });
   }
@@ -105,11 +106,20 @@ 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. Need to call GS update()
+    // this.items[0]?.w = 2; // this will not trigger gridstackItems.changes.subscribe, only DOM values are update, so call GS update() instead
     const n = this.grid.engine.nodes[0];
     if (n) this.grid.update(n.el!, { w: 2 });
   }
 
+  public newLayout() {
+    this.items = [ // test updating existing and creating new one
+      {x: 0, y: 1, id: 1},
+      {x: 1, y: 1, id: 2},
+      // {x: 2, y: 1, id: 3}, // delete item
+      {x: 3, y: 0, w: 3}, // new item
+    ];
+  }
+
   // ngFor unique node id to have correct match between our items used and GS
   identify(index: number, w: GridStackWidget) {
     return w.id;

demo/angular/src/app/ngFor_cmd.ts

@@ -3,10 +3,10 @@
  * NOTE: see the simpler and better (tracks all changes) angular-ng-for-test
  */
 
-import { Component, AfterViewInit, Input, ViewChildren, QueryList } from "@angular/core";
+import { Component, AfterViewInit, Input, ViewChildren, QueryList, ElementRef } from '@angular/core';
 import { Subject, zip } from "rxjs";
 
-import { GridStack, GridStackWidget } from 'gridstack';
+import { GridItemHTMLElement, GridStack, GridStackWidget } from 'gridstack';
 
 @Component({
   selector: "angular-ng-for-cmd-test",
@@ -31,30 +31,24 @@ import { GridStack, GridStackWidget } from 'gridstack';
       </div>
     </div>
   `,
-  styles: [
-    `
-      // !!!IMPORTANT!!! Import this through your styles.scss or angular.json! This is just for demo purposes
-      :host {
-        ::ng-deep {
-          @import "demo";
-        }
-      }
-    `,
-  ],
+  // gridstack.min.css and other custom styles should be included in global styles.scss or here
 })
 export class AngularNgForCmdTestComponent implements AfterViewInit {
-  @ViewChildren("gridStackItem") gridstackItems!: QueryList<any>;
+  /** list of HTML items that we track to know when the DOM has been updated to make/remove GS widgets */
+  @ViewChildren("gridStackItem") gridstackItems!: QueryList<ElementRef<GridItemHTMLElement>>;
+
+  /** set the items to display. */
   @Input() public items: GridStackWidget[] = [
-    { x: 0, y: 0, w: 1, h: 1 },
-    { x: 1, y: 1, w: 1, h: 1 },
-    { x: 2, y: 2, w: 1, h: 1 },
+    {x: 0, y: 0},
+    {x: 1, y: 1},
+    {x: 2, y: 2},
   ];
 
   private grid!: GridStack;
   private widgetToMake: Subject<{
     action: "add" | "remove" | "update";
     id: number;
-  }> = new Subject(); // consider to use a statemanagement like ngrx component store to do this
+  }> = new Subject(); // consider to use a state management like ngrx component store to do this
 
   constructor() {}
 
@@ -79,9 +73,11 @@ export class AngularNgForCmdTestComponent implements AfterViewInit {
       }
     );
 
-    // 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().
+    // TODO: the problem with this code is that our items list does NOT reflect changes made by GS (user directly changing,
+    // or conflict during initial layout) and believe the other ngFor example (which does track changes) is also cleaner
+    // as it doesn't require user creating special action commands nor track 'both' changes using zip().
+    // TODO: identify() uses index which is not guaranteed to match between invocations (insert/delete in
+    // middle of list instead of end as demo does)
   }
 
   /**
@@ -103,6 +99,7 @@ export class AngularNgForCmdTestComponent implements AfterViewInit {
     this.grid.update(updateEl!, { w: 2 });
   }
 
+  // ngFor lookup indexing
   identify(index: number) {
     return index;
   }

demo/index.html

@@ -37,6 +37,7 @@ <h1>Angular src Demos</h1>
   <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>
+    <li><a href="angular/src/app/ngFor_cmd.ts">ngFor with command (not recommended)</a></li>
   </ol>
   <h1>Old v5.1.1 Jquery Demos</h1>
   Note: those are no longer supported, and use an old version of the lib to compare functionality.