From a2bc4b496494c9bfc099dd881c0f975fbc969b79 Mon Sep 17 00:00:00 2001
From: Tiberiu Zuld <tiberiuzuld@gmail.com>
Date: Tue, 21 Jul 2020 10:31:28 +0300
Subject: [PATCH] improve trackBy demo

---
 .../src/lib/gridsterItem.component.ts         |  2 +-
 .../sections/trackBy/trackBy.component.html   |  9 ++++++++-
 src/app/sections/trackBy/trackBy.component.ts | 20 ++++++++++++++-----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/projects/angular-gridster2/src/lib/gridsterItem.component.ts b/projects/angular-gridster2/src/lib/gridsterItem.component.ts
index a8b55543..831ca4d3 100644
--- a/projects/angular-gridster2/src/lib/gridsterItem.component.ts
+++ b/projects/angular-gridster2/src/lib/gridsterItem.component.ts
@@ -58,7 +58,7 @@ export class GridsterItemComponent implements OnDestroy, OnChanges, GridsterItem
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['item']) {
+    if (changes.item) {
       this.updateOptions();
 
       if (!this.init) {
diff --git a/src/app/sections/trackBy/trackBy.component.html b/src/app/sections/trackBy/trackBy.component.html
index 5f0bbc7b..0fe00e7e 100644
--- a/src/app/sections/trackBy/trackBy.component.html
+++ b/src/app/sections/trackBy/trackBy.component.html
@@ -7,15 +7,22 @@
   </a>
   <markdown [src]="'assets/trackBy.md'"></markdown>
 </div>
-<div *ngIf="dashboard[0]" class="options-header">
+<div class="options-header">
   <button (click)="reset()" class="cols-2" color="accent" mat-raised-button>
     Reset
   </button>
+  <button (click)="addItem()" class="add-button cols-2" mat-mini-fab>
+    <mat-icon>add</mat-icon>
+  </button>
 </div>
 
 
 <gridster [options]="options">
   <gridster-item *ngFor="let item of dashboard; trackBy: trackBy" [item]="item">
+    <button (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)"
+            mat-mini-fab style="position: absolute; right: 10px; top: 10px">
+      <mat-icon>delete</mat-icon>
+    </button>
     <app-trackby-item [id]="item.id"></app-trackby-item>
   </gridster-item>
 </gridster>
diff --git a/src/app/sections/trackBy/trackBy.component.ts b/src/app/sections/trackBy/trackBy.component.ts
index 6de30030..e88b6879 100644
--- a/src/app/sections/trackBy/trackBy.component.ts
+++ b/src/app/sections/trackBy/trackBy.component.ts
@@ -60,12 +60,12 @@ export class TrackByComponent implements OnInit {
         dragEnabled: true,
         resizeEnabled: true,
         compactEnabled: true,
-        id: '0',
+        id: 0,
       },
-      {cols: 2, rows: 2, y: 0, x: 2, id: '1'},
-      {cols: 1, rows: 1, y: 0, x: 4, id: '2'},
-      {cols: 3, rows: 2, y: 1, x: 4, id: '3'},
-      {cols: 1, rows: 1, y: 2, x: 1, id: '4'}
+      {cols: 2, rows: 2, y: 0, x: 2, id: 1},
+      {cols: 1, rows: 1, y: 0, x: 4, id: 2},
+      {cols: 3, rows: 2, y: 1, x: 4, id: 3},
+      {cols: 1, rows: 1, y: 2, x: 1, id: 4}
     ];
     this.dashboardOriginal = this.dashboard.map(x => ({...x}));
   }
@@ -83,4 +83,14 @@ export class TrackByComponent implements OnInit {
   trackBy(index: number, item: GridsterItem): number {
     return item.id;
   }
+
+  addItem(): void {
+    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1, id: this.dashboard.length});
+  }
+
+  removeItem($event: MouseEvent | TouchEvent, item): void {
+    $event.preventDefault();
+    $event.stopPropagation();
+    this.dashboard.splice(this.dashboard.indexOf(item), 1);
+  }
 }