improve trackBy demo

tiberiuzuld · Jul 21, 2020 · a2bc4b4 · a2bc4b4
1 parent fc6e50d
commit a2bc4b4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
 }