gridstack 10.1.2 → 10.2.1

package/angular/projects/demo/src/app/app.component.css

@@ -1,11 +0,0 @@
-.test-container {
-  margin-top: 30px;
-}
-button.active {
-  color: #fff;
-  background-color: #007bff;
-}
-
-.text-container {
-  display: flex;
-}

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

@@ -1,110 +0,0 @@
-
-<div class="button-container">
-  <p class="pick-info">Pick a demo to load:</p>
-  <button (click)="onShow(0)" [class.active]="show===0">Simple</button>
-  <button (click)="onShow(1)" [class.active]="show===1">ngFor case</button>
-  <button (click)="onShow(2)" [class.active]="show===2">ngFor custom command</button>
-  <button (click)="onShow(3)" [class.active]="show===3">Component HTML template</button>
-  <button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
-  <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
-  <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
-  <button (click)="onShow(7)" [class.active]="show===7">Two Grids + sidebar</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 *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>
-  <!-- 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 *ngIf="show===7">
-  <p><b>two.html</b>: shows multiple grids and outside drag&drop</p>
-  <div class="row">
-    <div class="col-md-3">
-      <div class="sidebar">
-        <!-- will size to match content -->
-        <div class="grid-stack-item">
-          <div class="grid-stack-item-content">Drag me</div>
-        </div>
-        <!-- manually force a drop size of 2x1 -->
-        <div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
-          <div class="grid-stack-item-content">2x1, max=3</div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-9">
-      <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 class="grid-container"></div>
-
-<div class="text-container">
-  <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
-  <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
-</div>
-
-</div>

package/angular/projects/demo/src/app/app.component.spec.ts

@@ -1,25 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should have content', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.pick-info')?.textContent).toContain('Pick a demo to load');
-  });
-});

package/angular/projects/demo/src/app/app.component.ts

@@ -1,223 +0,0 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { GridStack, GridStackOptions, GridStackWidget } from 'gridstack';
-import { AngularSimpleComponent } from './simple';
-import { AngularNgForTestComponent } from './ngFor';
-import { AngularNgForCmdTestComponent } from './ngFor_cmd';
-
-// NOTE: local testing of file
-// import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from './gridstack.component';
-import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
-
-// unique ids sets for each item for correct ngFor updating
-let ids = 1;
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent implements OnInit {
-
-  @ViewChild(AngularSimpleComponent) case0Comp?: AngularSimpleComponent;
-  @ViewChild(AngularNgForTestComponent) case1Comp?: AngularNgForTestComponent;
-  @ViewChild(AngularNgForCmdTestComponent) case2Comp?: AngularNgForCmdTestComponent;
-  @ViewChild(GridstackComponent) gridComp?: GridstackComponent;
-  @ViewChild('origTextArea', {static: true}) origTextEl?: ElementRef<HTMLTextAreaElement>;
-  @ViewChild('textArea', {static: true}) textEl?: ElementRef<HTMLTextAreaElement>;
-
-  // which sample to show
-  public show = 5;
-
-  /** sample grid options and items to load... */
-  public items: GridStackWidget[] = [
-    {x: 0, y: 0, minW: 2},
-    {x: 1, y: 1},
-    {x: 2, y: 2},
-  ];
-  public gridOptions: GridStackOptions = {
-    margin: 5,
-    // float: true,
-    minRow: 1,
-    cellHeight: 70,
-    columnOpts: { breakpoints: [{w:768, c:1}] },
-  }
-  private sub0: NgGridStackWidget[] = [{x:0, y:0, selector:'app-a'}, {x:1, y:0, content:'plain html'}, {x:0, y:1, selector:'app-b'} ];
-  public gridOptionsFull: NgGridStackOptions = {
-    ...this.gridOptions,
-    children: this.sub0,
-  }
-
-  // nested grid options
-  private subOptions: GridStackOptions = {
-    cellHeight: 50, // should be 50 - top/bottom
-    column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
-    acceptWidgets: true, // will accept .grid-stack-item by default
-    margin: 5,
-  };
-  private sub1: NgGridStackWidget[] = [ {x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-b'}, {x:2, y:0, selector:'app-c'}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
-  private sub2: NgGridStackWidget[] = [ {x:0, y:0}, {x:0, y:1, w:2}];
-  private subChildren: NgGridStackWidget[] = [
-    {x:0, y:0, content: 'regular item'},
-    {x:1, y:0, w:4, h:4, subGridOpts: {children: this.sub1, class: 'sub1', ...this.subOptions}},
-    {x:5, y:0, w:3, h:4, subGridOpts: {children: this.sub2, class: 'sub2', ...this.subOptions}},
-  ]
-  public nestedGridOptions: NgGridStackOptions = { // main grid options
-    cellHeight: 50,
-    margin: 5,
-    minRow: 2, // don't collapse when empty
-    acceptWidgets: true,
-    children: this.subChildren
-  };
-  public twoGridOpt1: NgGridStackOptions = {
-    column: 6,
-    cellHeight: 50,
-    margin: 5,
-    minRow: 1, // don't collapse when empty
-    removable: '.trash',
-    acceptWidgets: true,
-    float: true,
-    children: [
-      {x: 0, y: 0, w: 2, h: 2},
-      {x: 3, y: 1, h: 2},
-      {x: 4, y: 1},
-      {x: 2, y: 3, w: 3, maxW: 3, id: 'special', content: 'has maxW=3'},
-    ]
-  };
-  public twoGridOpt2: NgGridStackOptions = { ...this.twoGridOpt1, float: false }
-  private serializedData?: NgGridStackOptions;
-
-  constructor() {
-    // give them content and unique id to make sure we track them during changes below...
-    [...this.items, ...this.subChildren, ...this.sub1, ...this.sub2, ...this.sub0].forEach((w: NgGridStackWidget) => {
-      if (!w.selector && !w.content && !w.subGridOpts) w.content = `item ${ids}`;
-      w.id = String(ids++);
-    });
-  }
-
-  ngOnInit(): void {
-    this.onShow(this.show);
-
-    // TEST
-    // setTimeout(() => {
-    //   if (!this.gridComp) return;
-    //   this.saveGrid();
-    //   // this.clearGrid();
-    //   this.delete();
-    //   this.delete();
-    //   this.loadGrid();
-    //   this.delete();
-    //   this.delete();
-    // }, 500)
-  }
-
-  public onShow(val: number) {
-    this.show = val;
-
-    // set globally our method to create the right widget type
-    if (val < 3) GridStack.addRemoveCB = undefined;
-    else GridStack.addRemoveCB = gsCreateNgComponents;
-
-    // let the switch take affect then load the starting values (since we sometimes save())
-    setTimeout(() => {
-      let data;
-      switch(val) {
-        case 0: data = this.case0Comp?.items; break;
-        case 1: data = this.case1Comp?.items; break;
-        case 2: data = this.case2Comp?.items; break;
-        case 3: data = this.gridComp?.grid?.save(true, true); break;
-        case 4: data = this.items; break;
-        case 5: data = this.gridOptionsFull; break;
-        case 6: data = this.nestedGridOptions; break;
-        case 7: data = this.twoGridOpt1;
-          GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
-          break;
-      }
-      if (this.origTextEl) this.origTextEl.nativeElement.value = JSON.stringify(data, null, '  ');
-    });
-    if (this.textEl) this.textEl.nativeElement.value = '';
-  }
-
-  /** called whenever items change size/position/etc.. */
-  public onChange(data: nodesCB) {
-    // TODO: update our TEMPLATE list to match ?
-    // NOTE: no need for dynamic as we can always use grid.save() to get latest layout, or grid.engine.nodes
-    console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
-  }
-
-  public onResizeStop(data: elementCB) {
-    console.log('resizestop ', data.el.gridstackNode);
-  }
-
-  /**
-   * TEST dynamic grid operations - uses grid API directly (since we don't track structure that gets out of sync)
-   */
-  public add() {
-    // TODO: BUG the content doesn't appear until widget is moved around (or another created). Need to force
-    // angular detection changes...
-    this.gridComp?.grid?.addWidget({x:3, y:0, w:2, content:`item ${ids}`, id:String(ids++)});
-  }
-  public delete() {
-    let grid = this.gridComp?.grid;
-    if (!grid) return;
-    let node = grid.engine.nodes[0];
-    // delete any children first before subGrid itself...
-    if (node?.subGrid && node.subGrid.engine.nodes.length) {
-      grid = node.subGrid;
-      node = grid.engine.nodes[0];
-    }
-    if (node) grid.removeWidget(node.el!);
-  }
-  public modify() {
-    this.gridComp?.grid?.update(this.gridComp?.grid.engine.nodes[0]?.el!, {w:3})
-  }
-  public newLayout() {
-    this.gridComp?.grid?.load([
-      {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
-      {x:1, y:1, id:'2'},
-      // {x:2, y:1, id:'3'}, // delete item
-      {x:3, y:0, w:2, content:'new item'}, // new item
-    ]);
-  }
-
-  /**
-   * ngFor case: TEST TEMPLATE operations - NOT recommended unless you have no GS creating/re-parenting
-   */
-  public addNgFor() {
-    // new array isn't required as Angular detects changes to content with trackBy:identify()
-    // this.items = [...this.items, { x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++) }];
-    this.items.push({w:2, content:`item ${ids}`, id:String(ids++)});
-  }
-  public deleteNgFor() {
-    this.items.pop();
-  }
-  public modifyNgFor() {
-    // this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so set new option of the gridItem instead
-    // this.items[0].w = 3;
-    const gridItem = this.gridComp?.gridstackItems?.get(0);
-    if (gridItem) gridItem.options = {w:3};
-  }
-  public newLayoutNgFor() {
-    this.items = [
-      {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
-      {x:1, y:1, id:'2'},
-      // {x:2, y:1, id:'3'}, // delete item
-      {x:3, y:0, w:2, content:'new item'}, // new item
-    ];
-  }
-  public clearGrid() {
-    if (!this.gridComp) return;
-    this.gridComp.grid?.removeAll();
-  }
-  public saveGrid() {
-    this.serializedData = this.gridComp?.grid?.save(false, true) as GridStackOptions || ''; // no content, full options
-    if (this.textEl) this.textEl.nativeElement.value = JSON.stringify(this.serializedData, null, '  ');
-  }
-  public loadGrid() {
-    if (!this.gridComp) return;
-    GridStack.addGrid(this.gridComp.el, this.serializedData);
-  }
-
-  // ngFor TEMPLATE unique node id to have correct match between our items used and GS
-  public identify(index: number, w: GridStackWidget) {
-    return w.id; // or use index if no id is set and you only modify at the end...
-  }
-}

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

@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { AngularNgForTestComponent } from './ngFor';
-import { AngularNgForCmdTestComponent } from './ngFor_cmd';
-import { AngularSimpleComponent } from './simple';
-import { AComponent, BComponent, CComponent } from './dummy.component';
-
-// local testing
-// import { GridstackModule } from './gridstack.module';
-// import { GridstackComponent } from './gridstack.component';
-import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    GridstackModule,
-  ],
-  declarations: [
-      AngularNgForCmdTestComponent,
-      AngularNgForTestComponent,
-      AngularSimpleComponent,
-      AppComponent,
-      AComponent,
-      BComponent,
-      CComponent,
-  ],
-  exports: [
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {
-  constructor() {
-    // register all our dynamic components created in the grid
-    GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent]);
-  }
-}

package/angular/projects/demo/src/app/dummy.component.ts

@@ -1,34 +0,0 @@
-/**
- * gridstack.component.ts 8.2.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-// dummy testing component that will be grid items content
-
-import { Component, OnDestroy, Input } from '@angular/core';
-import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
-
-@Component({
-  selector: 'app-a',
-  template: 'Comp A {{text}}',
-})
-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
-}
-
-@Component({
-  selector: 'app-b',
-  template: 'Comp B',
-})
-export class BComponent extends BaseWidget implements OnDestroy {
-  ngOnDestroy() { console.log('Comp B destroyed'); }
-}
-
-@Component({
-  selector: 'app-c',
-  template: 'Comp C',
-})
-export class CComponent extends BaseWidget {
-}

package/angular/projects/demo/src/app/ngFor.ts

@@ -1,131 +0,0 @@
-/**
- * Example using Angular ngFor to loop through items and create DOM items
- */
-
-import { Component, AfterViewInit, Input, ViewChildren, QueryList, ElementRef } from '@angular/core';
-import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget, Utils } from 'gridstack';
-
-// unique ids sets for each item for correct ngFor updating
-let ids = 1;
-
-@Component({
-  selector: "angular-ng-for-test",
-  template: `
-    <p><b>ngFor</b>: Example using Angular ngFor to loop through items and create DOM items. This track changes made to the array of items, waits for DOM rendering, then update GS</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>
-    <div class="grid-stack">
-      <!-- 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>
-    </div>
-  `,
-  // 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 */
-  @ViewChildren("gridStackItem") gridstackItems!: QueryList<ElementRef<GridItemHTMLElement>>;
-
-  /** set the items to display. */
-  @Input() public set items(list: GridStackWidget[]) {
-    this._items = list || [];
-    this._items.forEach(w => w.id = w.id || String(ids++)); // make sure a unique id is generated for correct ngFor loop update
-  }
-  public get items(): GridStackWidget[] { return this._items}
-
-  private grid!: GridStack;
-  public _items!: GridStackWidget[];
-
-  constructor() {
-    this.items = [
-      {x: 0, y: 0},
-      {x: 1, y: 1},
-      {x: 2, y: 2},
-    ];
-  }
-
-  // wait until after DOM is ready to init gridstack - can't be ngOnInit() as angular ngFor needs to run first!
-  public ngAfterViewInit() {
-    this.grid = GridStack.init({
-      margin: 5,
-      float: true,
-    })
-    .on('change added', (event: Event, nodes: GridStackNode[]) => this.onChange(nodes));
-
-    // 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 items changed by Angular)
-     */
-    this.gridstackItems.changes.subscribe(() => {
-      const layout: GridStackWidget[] = [];
-      this.gridstackItems.forEach(ref => {
-        const n = ref.nativeElement.gridstackNode || this.grid.makeWidget(ref.nativeElement).gridstackNode;
-        if (n) layout.push(n);
-      });
-      this.grid.load(layout); // efficient that does diffs only
-    })
-  }
-
-  /** 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 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++) });
-  }
-
-  public delete() {
-    this.items.pop();
-  }
-
-  public modify() {
-    // this will only update the DOM attr (from the ngFor loop in our template above)
-    // but not trigger gridstackItems.changes for GS to auto-update, so call GS update() instead
-    // this.items[0].w = 2;
-    const n = this.grid.engine.nodes[0];
-    if (n?.el) this.grid.update(n.el, {w:3});
-  }
-
-  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;
-  }
-}

package/angular/projects/demo/src/app/ngFor_cmd.ts

@@ -1,106 +0,0 @@
-/**
- * Example using Angular ngFor to loop through items and create DOM items - this uses a custom command.
- * NOTE: see the simpler and better (tracks all changes) angular-ng-for-test
- */
-
-import { Component, AfterViewInit, Input, ViewChildren, QueryList, ElementRef } from '@angular/core';
-import { Subject, zip } from "rxjs";
-
-import { GridItemHTMLElement, GridStack, GridStackWidget } from 'gridstack';
-
-@Component({
-  selector: "angular-ng-for-cmd-test",
-  template: `
-    <p><b>ngFor CMD</b>: Example using Angular ngFor to loop through items, but uses an explicity command to let us update GS (see automatic better way)</p>
-    <button (click)="add()">add item</button>
-    <button (click)="delete()">remove item</button>
-    <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>
-    </div>
-  `,
-  // gridstack.min.css and other custom styles should be included in global styles.scss or here
-})
-export class AngularNgForCmdTestComponent implements AfterViewInit {
-  /** 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},
-    {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 state management like ngrx component store to do this
-
-  constructor() {}
-
-  // wait until after DOM is ready to init gridstack - can't be ngOnInit() as angular ngFor needs to run first!
-  public ngAfterViewInit() {
-    this.grid = GridStack.init({
-      margin: 5,
-      float: true,
-    });
-
-    // To sync dom manipulation done by Angular and widget manipulation done by gridstack we need to zip the observables
-    zip(this.gridstackItems.changes, this.widgetToMake).subscribe(
-      ([changedWidget, widgetToMake]) => {
-        if (widgetToMake.action === "add") {
-          this.grid.makeWidget(`#${widgetToMake.id}`);
-        } else if (widgetToMake.action === "remove") {
-          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 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)
-  }
-
-  /**
-   * CRUD operations
-   */
-  public add() {
-    this.items = [...this.items, { x: 3, y: 0, w: 3 }];
-    this.widgetToMake.next({ action: "add", id: this.items.length - 1 });
-  }
-
-  public delete() {
-    this.items.pop();
-    this.widgetToMake.next({ action: "remove", id: this.items.length });
-  }
-
-  // a change of a widget doesn´t change to amount of items in ngFor therefore we don´t need to do it through the zip function above
-  public modify() {
-    const updateEl = this.grid.getGridItems().find((el) => el.id === `${0}`);
-    this.grid.update(updateEl!, { w: 2 });
-  }
-
-  // ngFor lookup indexing
-  identify(index: number) {
-    return index;
-  }
-}