From ee855233a67e7963e35163b059ad748206331e4a Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Thu, 24 Oct 2024 17:22:06 -0700
Subject: [PATCH] using angular 17 demo syntax

* demos are using new syntax, readme has both
* left the wrapper angular 14-18+ compatible.
---
 angular/README.md                             |   5 +
 .../projects/demo/src/app/app.component.html  | 201 +++++++++---------
 angular/projects/demo/src/app/ngFor.ts        |  30 ++-
 angular/projects/demo/src/app/ngFor_cmd.ts    |  27 +--
 4 files changed, 135 insertions(+), 128 deletions(-)

diff --git a/angular/README.md b/angular/README.md
index b7c1031c2..00b89ecb3 100644
--- a/angular/README.md
+++ b/angular/README.md
@@ -129,6 +129,11 @@ HTML
 
 ```html
 <gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <!-- Angular 17+ -->
+   @for (n of items; track n.id) {
+    <gridstack-item [options]="n">Item {{n.id}}</gridstack-item>
+  }
+  <!-- Angular 16 -->
   <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> Item {{n.id}} </gridstack-item>
 </gridstack>
 ```
diff --git a/angular/projects/demo/src/app/app.component.html b/angular/projects/demo/src/app/app.component.html
index c22f9f547..f079bc614 100644
--- a/angular/projects/demo/src/app/app.component.html
+++ b/angular/projects/demo/src/app/app.component.html
@@ -14,111 +14,116 @@
 </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 *ngIf="show===3">
-  <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
-  <button (click)="add()">add item</button>
-  <button (click)="delete()">remove item</button>
-  <button (click)="modify()">modify item</button>
-  <button (click)="newLayout()">new layout</button>
-  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
-    <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
-    <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
-  </gridstack>
-</div>
-
-<div *ngIf="show===4">
-  <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
-  <button (click)="addNgFor()">add item</button>
-  <button (click)="deleteNgFor()">remove item</button>
-  <button (click)="modifyNgFor()">modify item</button>
-  <button (click)="newLayoutNgFor()">new layout</button>
-  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
-    <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
-    </gridstack-item>
-  </gridstack>
-</div>
-
-<div *ngIf="show===5">
-  <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
-  <button (click)="add()">add item</button>
-  <button (click)="delete()">remove item</button>
-  <button (click)="modify()">modify item</button>
-  <button (click)="newLayout()">new layout</button>
-  <button (click)="saveGrid()">Save</button>
-  <button (click)="clearGrid()">Clear</button>
-  <button (click)="loadGrid()">Load</button>
-  <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
-  </gridstack>
-</div>
-
-
-<div *ngIf="show===6">
-  <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
-  <button (click)="add()">add item</button>
-  <button (click)="delete()">remove item</button>
-  <button (click)="modify()">modify item</button>
-  <button (click)="newLayout()">new layout</button>
-  <button (click)="saveGrid()">Save</button>
-  <button (click)="clearGrid()">Clear</button>
-  <button (click)="loadGrid()">Load</button>
-  <!-- add .grid-stack-item for acceptWidgets:true -->
-  <div class="sidebar-item grid-stack-item">Drag nested</div>
-  <div class="sidebar-item grid-stack-item">Comp N nested</div>
-
-  <!-- TODO: addGrid() in code for testing instead ? -->
-  <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
-    <div empty-content>Add items here or reload the grid</div>
-  </gridstack>
-</div>
+  @if (show===0) {
+    <angular-simple-test></angular-simple-test>
+  } @else if (show===1) {
+    <angular-ng-for-test></angular-ng-for-test>
+  } @else if (show===2) {
+    <angular-ng-for-cmd-test></angular-ng-for-cmd-test>
+  } @else if (show===3) {
+    <div>
+      <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
+      <button (click)="add()">add item</button>
+      <button (click)="delete()">remove item</button>
+      <button (click)="modify()">modify item</button>
+      <button (click)="newLayout()">new layout</button>
+      <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+        <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
+        <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
+      </gridstack>
+    </div>
+  } @else if (show===4) {
+    <div>
+      <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
+      <button (click)="addNgFor()">add item</button>
+      <button (click)="deleteNgFor()">remove item</button>
+      <button (click)="modifyNgFor()">modify item</button>
+      <button (click)="newLayoutNgFor()">new layout</button>
+      <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+        @for (n of items; track n.id) {
+          <gridstack-item [options]="n"></gridstack-item>
+        }
+      </gridstack>
+    </div>
+  } @else if (show===5) {
+    <div>
+      <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
+      <button (click)="add()">add item</button>
+      <button (click)="delete()">remove item</button>
+      <button (click)="modify()">modify item</button>
+      <button (click)="newLayout()">new layout</button>
+      <button (click)="saveGrid()">Save</button>
+      <button (click)="clearGrid()">Clear</button>
+      <button (click)="loadGrid()">Load</button>
+      <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+      </gridstack>
+    </div>
+  } @else if (show===6) {
+    <div>
+      <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
+      <button (click)="add()">add item</button>
+      <button (click)="delete()">remove item</button>
+      <button (click)="modify()">modify item</button>
+      <button (click)="newLayout()">new layout</button>
+      <button (click)="saveGrid()">Save</button>
+      <button (click)="clearGrid()">Clear</button>
+      <button (click)="loadGrid()">Load</button>
+      <!-- add .grid-stack-item for acceptWidgets:true -->
+      <div class="sidebar-item grid-stack-item">Drag nested</div>
+      <div class="sidebar-item grid-stack-item">Comp N nested</div>
 
-<div *ngIf="show===7">
-  <p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
-  <div class="row">
-    <div class="col-md-6">
-      <div class="sidebar">
-        <div class="sidebar-item grid-stack-item">will be A</div>
-        <div class="sidebar-item grid-stack-item">will be B max=3</div>
-      </div>
+      <!-- TODO: addGrid() in code for testing instead ? -->
+      <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+        <div empty-content>Add items here or reload the grid</div>
+      </gridstack>
     </div>
-    <div class="col-md-6">
-      <div class="trash" id="trash">
+  } @else if (show===7) {
+    <div>
+      <p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="sidebar">
+            <div class="sidebar-item grid-stack-item">will be A</div>
+            <div class="sidebar-item grid-stack-item">will be B max=3</div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="trash" id="trash">
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-top: 20px">
+        <div class="col-md-6">
+          <gridstack [options]="twoGridOpt1"></gridstack>
+        </div>
+        <div class="col-md-6">
+          <gridstack [options]="twoGridOpt2"></gridstack>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="row" style="margin-top: 20px">
-    <div class="col-md-6">
-      <gridstack [options]="twoGridOpt1"></gridstack>
+  } @else if (show===8) {
+    <div>
+      <p>delay loading of components</p>
+      <div style="height: 120px; overflow-y: auto">
+        <gridstack [options]="gridOptionsDelay"></gridstack>
+      </div>
     </div>
-    <div class="col-md-6">
-      <gridstack [options]="twoGridOpt2"></gridstack>
+  } @else if (show===9) {
+    <div>
+      <p>load() + clear() to memory leak test between the two</p>
+      <button (click)="clearGrid()">Clear</button>
+      <button (click)="load(sub0)">load</button>
+      <button (click)="load(sub2)">load 2</button>
+      <gridstack [options]="gridOptions"></gridstack>
     </div>
-  </div>
-</div>
 
-<div *ngIf="show===8">
-  <p>delay loading of components</p>
-  <div style="height: 120px; overflow-y: auto">
-    <gridstack [options]="gridOptionsDelay"></gridstack>
-  </div>
-</div>
+  <div class="grid-container"></div>
 
-<div *ngIf="show===9">
-  <p>load() + clear() to memory leak test between the two</p>
-  <button (click)="clearGrid()">Clear</button>
-  <button (click)="load(sub0)">load</button>
-  <button (click)="load(sub2)">load 2</button>
-  <gridstack [options]="gridOptions"></gridstack>
-</div>
-
-<div class="grid-container"></div>
-
-<div class="text-container" *ngIf="show!=8">
-  <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
-  <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
-</div>
+} @else if (show!=8) {
+    <div class="text-container">
+      <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
+      <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
+    </div>
+}
 
 </div>
diff --git a/angular/projects/demo/src/app/ngFor.ts b/angular/projects/demo/src/app/ngFor.ts
index 2eeff838c..a51c8142b 100644
--- a/angular/projects/demo/src/app/ngFor.ts
+++ b/angular/projects/demo/src/app/ngFor.ts
@@ -20,19 +20,20 @@ let ids = 1;
       <!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items)
       NOTE: this example is NOT complete as there are many more properties than listed (minW, maxW, etc....)
       -->
-      <div *ngFor="let n of items; trackBy: identify"
-        class="grid-stack-item"
-        [attr.gs-id]="n.id"
-        [attr.gs-x]="n.x"
-        [attr.gs-y]="n.y"
-        [attr.gs-w]="n.w"
-        [attr.gs-h]="n.h"
-        #gridStackItem
-      >
-        <div class="grid-stack-item-content">item {{ n.id }}</div>
-      </div>
+      @for (n of items; track n.id) {
+        <div
+          class="grid-stack-item"
+          [attr.gs-id]="n.id"
+          [attr.gs-x]="n.x"
+          [attr.gs-y]="n.y"
+          [attr.gs-w]="n.w"
+          [attr.gs-h]="n.h"
+          #gridStackItem>
+          <div class="grid-stack-item-content">item {{ n.id }}</div>
+        </div>
+      }
     </div>
-  `,
+    `,
   // gridstack.min.css and other custom styles should be included in global styles.scss or here
 })
 export class AngularNgForTestComponent implements AfterViewInit {
@@ -123,9 +124,4 @@ export class AngularNgForTestComponent implements AfterViewInit {
       {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;
-  }
 }
diff --git a/angular/projects/demo/src/app/ngFor_cmd.ts b/angular/projects/demo/src/app/ngFor_cmd.ts
index b0df6c1f6..4e9e77d8e 100644
--- a/angular/projects/demo/src/app/ngFor_cmd.ts
+++ b/angular/projects/demo/src/app/ngFor_cmd.ts
@@ -17,20 +17,21 @@ import { GridItemHTMLElement, GridStack, GridStackWidget } from 'gridstack';
     <button (click)="modify()">modify item</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; let i = index; trackBy: identify"
-        [id]="i"
-        class="grid-stack-item"
-        [attr.gs-x]="n.x"
-        [attr.gs-y]="n.y"
-        [attr.gs-w]="n.w"
-        [attr.gs-h]="n.h"
-        #gridStackItem
-      >
-        <div class="grid-stack-item-content">item {{ i }}</div>
-      </div>
+      @for (n of items; track n.id; let i = $index) {
+        <div
+          [id]="i"
+          class="grid-stack-item"
+          [attr.gs-x]="n.x"
+          [attr.gs-y]="n.y"
+          [attr.gs-w]="n.w"
+          [attr.gs-h]="n.h"
+          #gridStackItem
+          >
+          <div class="grid-stack-item-content">item {{ i }}</div>
+        </div>
+      }
     </div>
-  `,
+    `,
   // gridstack.min.css and other custom styles should be included in global styles.scss or here
 })
 export class AngularNgForCmdTestComponent implements AfterViewInit {