Angular wrapper fix - HTML template

adumesny · adumesny · commit 81af270a39f9 · 2023-01-31T20:26:04.000-08:00
* fix `addWidget()` to handle passing just {el} which was needed for Angular HTML template demo
* added HTML template to angular demo and fix wrapper accordingly
diff --git a/demo/angular/src/app/app.component.html b/demo/angular/src/app/app.component.html
@@ -4,8 +4,9 @@
   <button (click)="show=0">Simple</button>
   <button (click)="show=1">ngFor case</button>
   <button (click)="show=2">ngFor custom command</button>
-  <button (click)="show=3">Component ngFor</button>
-  <button (click)="show=4">Component Dynamic</button>
+  <button (click)="show=3">Component HTML template</button>
+  <button (click)="show=4">Component ngFor</button>
+  <button (click)="show=5">Component Dynamic</button>
 </div>
 
 <div class="test-container">
@@ -14,6 +15,18 @@
 <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(gridComp)">add item</button>
+  <button (click)="delete(gridComp)">remove item</button>
+  <button (click)="modify(gridComp)">modify item</button>
+  <button (click)="newLayout(gridComp)">new layout</button>
+  <gridstack #gridComp [options]="gridOptions" (changeGS)="onChange($event)" (resizestop)="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>
@@ -26,7 +39,7 @@
   </gridstack>
 </div>
 
-<div *ngIf="show===4" >
+<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(gridComp)">add item</button>
   <button (click)="delete(gridComp)">remove item</button>
diff --git a/demo/angular/src/app/app.component.ts b/demo/angular/src/app/app.component.ts
@@ -11,7 +11,7 @@ let ids = 1;
 })
 export class AppComponent {
   // which sample to show
-  public show = 4;
+  public show = 5;
 
   /** sample grid options and items to load... */
   public items: GridStackWidget[] = [
diff --git a/demo/angular/src/app/gridstack-item.component.ts b/demo/angular/src/app/gridstack-item.component.ts
@@ -36,7 +36,7 @@ export class GridstackItemComponent {
   }
   /** return the latest grid options (from GS once built, otherwise initial values) */
   public get options(): GridStackNode {
-    return this.el.gridstackNode || this._options || {};
+    return this.el.gridstackNode || this._options || {el: this.el};
   }
 
   private _options?: GridStackNode;
diff --git a/demo/angular/src/index.html b/demo/angular/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularNgFor</title>
+  <title>Angular Component</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -80,6 +80,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 7.2.2-dev (TBD)
+* fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo
+
 ## 7.2.2 (2023-01-16)
 * fix [#2171](https://github.com/gridstack/gridstack.js/issues/2171) `save()` nested grid has extra nested children & options
 * regression for fix #2110: nested grids lost their styles causing wrong rendering when dragging to create sub nesting
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -406,8 +406,8 @@ export class GridStack {
    * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
    */
   public addWidget(els?: GridStackWidget | GridStackElement, options?: GridStackWidget): GridItemHTMLElement {
-    function isGridStackWidget(w: GridStackWidget): w is GridStackWidget { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0
-      return w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
+    function isGridStackWidget(w: GridStackNode): w is GridStackNode { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0
+      return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
     }
 
     let el: HTMLElement;

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export class GridstackItemComponent {`
`36`	`36`	`}`
`37`	`37`	`/** return the latest grid options (from GS once built, otherwise initial values) */`
`38`	`38`	`public get options(): GridStackNode {`
`39`		`- return this.el.gridstackNode \|\| this._options \|\| {};`
	`39`	`+ return this.el.gridstackNode \|\| this._options \|\| {el: this.el};`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`private _options?: GridStackNode;`