fix and improve angular ng-for demo

Author: MeMeMax

demo/angular-ngFor.ts

@@ -1,66 +1,122 @@
 /**
  * Example using Angular ngFor to loop through items and create DOM items
  */
- import { Component, AfterViewInit, OnChanges, SimpleChanges, Input, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  AfterViewInit,
+  Input,
+  ViewChildren,
+  QueryList,
+} from "@angular/core";
 
- import { GridStack, GridStackWidget } from 'gridstack';
- import 'gridstack/dist/h5/gridstack-dd-native';
- 
- @Component({
-   selector: 'app-angular-ng-for-test',
-   template: `
-     <button (click)="add()">add item</button><button (click)="delete()">remove item</button><button (click)="change()">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" class="grid-stack-item" [attr.gs-w]="n.w" [attr.gs-h]="n.h" [attr.gs-x]="n.x" [attr.gs-y]="n.y">
-         <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
- 
-   // tell Angular only @Input will change - doesn't help
-   // changeDetection: ChangeDetectionStrategy.OnPush
- })
- export class AngularNgForTestComponent implements AfterViewInit, OnChanges {
+import { GridStack, GridStackWidget } from "gridstack";
+import "gridstack/dist/h5/gridstack-dd-native";
+import { Subject, zip } from "rxjs";
+
+@Component({
+  selector: "app-angular-ng-for-test",
+  template: `
+    <button (click)="add()">add item</button
+    ><button (click)="delete()">remove item</button
+    ><button (click)="change()">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-w]="n.w"
+        [attr.gs-h]="n.h"
+        [attr.gs-x]="n.x"
+        [attr.gs-y]="n.y"
+        #gridStackItem
+      >
+        <div class="grid-stack-item-content">item {{ i }}</div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      // !!!IMPORTANT!!! Import this through your styles.scss or angular.json! This is just for demo purposes
+      :host {
+        ::ng-deep {
+          @import "gridstack/dist/gridstack.min";
+        }
+      }
+      .grid-stack {
+        margin: 15px;
+        background-color: #d66666;
+        min-height: calc(100vh - 50px);
+      }
+
+      .grid-stack-item {
+        border: 1px solid #d1d1d1;
+      }
+    `,
+  ],
+})
+export class AngularNgForTestComponent implements AfterViewInit {
+  @ViewChildren("gridStackItem") gridstackItems: QueryList<any>;
   @Input() public items: GridStackWidget[] = [
-     { x: 0, y: 0, w: 9, h: 6},
-     { x: 9, y: 0, w: 3, h: 3},
-     { x: 9, y: 3, w: 3, h: 3},
-   ];
-   private grid: GridStack;
- 
-   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({
-       cellHeight: 70,
-     });
-   }
- 
-   /**
-    * this would be easier with addWidget(), removeWidget(), update() but simulating angular change detection instead...
-    */
-   public add() {
-     // this SHOULD trigger ngOnChanges() but not seeing it... and doing ngDoCheck() seem extreme ?
-     // https://www.reddit.com/r/angular/comments/azjefs/change_detection_for_arraysobjects/
-     // https://angular.io/guide/lifecycle-hooks#docheck
-     this.items = [...this.items, {x: 1, y: 6, w: 3}];
-     // this.items.push({x: 1, y: 6, w: 3});
-   }
-   public delete() {
-     this.items.pop(); // todo
-   }
-   public change() {
-     this.items[0].w = 1; // todo
-   }
- 
-   public ngOnChanges(changes: SimpleChanges) {
-     if (changes.items) {
-       // TODO: ... figure what is new and call makeWidget(), old -> removeWidget(el,false) and changed -> update()
-       console.log('items changed');
-     }
-   }
- }
- 
+    { x: 0, y: 0, w: 1, h: 1 },
+    { x: 1, y: 1, w: 1, h: 1 },
+    { x: 2, y: 2, w: 1, h: 1 },
+  ];
+
+  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
+
+  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({
+      alwaysShowResizeHandle:
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent
+        ),
+      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 removeEl = this.grid
+            .getGridItems()
+            .find((el) => el.id === `${widgetToMake.id}`);
+          this.grid.removeWidget(removeEl);
+        }
+      }
+    );
+  }
+
+  /**
+   * 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 change() {
+    const updateEl = this.grid.getGridItems().find((el) => el.id === `${0}`);
+    this.grid.update(updateEl, { w: 2 });
+  }
+
+  identify(index: number) {
+    return index;
+  }
+}