Update example and add grid update event

Author: hmtylmz

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div>
   <app-gridstack [options]="options">
-    <app-gridstack-item *ngFor="let item of items; index as index" [x]="item.x" [y]="item.y" [width]="item.width" [height]="item.height">
-      Hello {{index}}
+    <app-gridstack-item *ngFor="let item of items; index as index" [x]="item.x" [y]="item.y" [width]="item.width" [height]="item.height" [id]="item.id">
+      Id: {{item.id}}
     </app-gridstack-item>
   </app-gridstack>
 </div>

src/app/app.component.ts

@@ -15,12 +15,14 @@ export class AppComponent implements AfterViewInit {
 
   items = [
     {
+      id: 'abc',
       x: 0,
       y: 0,
       width: 5,
       height: 5
     },
     {
+      id: 'bcd',
       x: 10,
       y: 10,
       width: 15,
@@ -33,11 +35,22 @@ export class AppComponent implements AfterViewInit {
     // console.log(a);
     setTimeout(() => {
       this.items.push({
+        id: 'efc',
         x: 3,
         y: 10,
         width: 5,
         height: 5
       });
+      setTimeout(() => {
+        // this.items[0].x = 20;
+        this.items.push({
+          id: 'efcw',
+          x: 3,
+          y: 10,
+          width: 5,
+          height: 5
+        });
+      }, 3000);
     }, 1000);
   }
 }

src/app/gridstack/gridstack-item/gridstack-item.component.scss

@@ -1,3 +1,6 @@
 :host(*) {
   display: block;
+  -webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.3);
+  -moz-box-shadow: 5px 5px 3px  0px rgba(0,0,0,0.3);
+  box-shadow: 5px 5px 3px rgba(0,0,0,0.3);
 }

src/app/gridstack/gridstack-item/gridstack-item.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, HostBinding, ChangeDetectionStrategy, Input, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
-import { GridstackService } from '../gridstack.service';
+/// <reference types="jquery" />
+/// <reference types="gridstack" />
 
-declare let jQuery: any;
+import { Component, ChangeDetectionStrategy, Input, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { GridstackService } from '../gridstack.service';
 
 @Component({
   selector: 'app-gridstack-item',
@@ -16,6 +17,7 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
     if (value !== this._x) {
       this._x = value;
       this.renderer.setAttribute(this.element, 'data-gs-x', this._x.toString());
+      this.move();
     }
   }
   get x(): number {
@@ -26,6 +28,7 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
     if (value !== this._y) {
       this._y = value;
       this.renderer.setAttribute(this.element, 'data-gs-y', this._y.toString());
+      this.move();
     }
   }
   get y(): number {
@@ -36,6 +39,7 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
     if (value !== this._width) {
       this._width = value;
       this.renderer.setAttribute(this.element, 'data-gs-width', this._width.toString());
+      this.resize();
     }
   }
   get width(): number {
@@ -46,14 +50,14 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
     if (value !== this._height) {
       this._height = value;
       this.renderer.setAttribute(this.element, 'data-gs-height', this._height.toString());
+      this.resize();
     }
   }
   get height(): number {
     return this._height;
   }
 
   element: HTMLElement;
-  private gridItem: any;
 
   private _x: number;
   private _y: number;
@@ -72,17 +76,24 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    console.log(this.gridstackService.grid);
     this.renderer.setAttribute(this.element, 'data-gs-id', this.id);
     if (this.gridstackService.grid.willItFit(this.x, this.y, this.width, this.height, true)) {
-      this.gridItem = this.gridstackService.grid.makeWidget(this.element);
+      this.gridstackService.grid.makeWidget(this.element);
     } else {
       console.error('Not enough free space to place the widget');
     }
   }
 
   ngOnDestroy(): void {
-    this.gridstackService.grid.remove(this.element);
+    this.gridstackService.grid.removeWidget(this.element);
+  }
+
+  private move() {
+    this.gridstackService.grid.move(this.element, this.x, this.y);
+  }
+
+  private resize() {
+    this.gridstackService.grid.resize(this.element, this.width, this.height);
   }
 
 }

src/app/gridstack/gridstack.service.ts

@@ -1,6 +1,9 @@
+/// <reference types="jquery" />
+/// <reference types="gridstack" />
+
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class GridstackService {
-  grid: any;
+  grid: GridStack;
 }

src/app/gridstack/gridstack/gridstack.component.ts

@@ -1,11 +1,12 @@
+/// <reference types="jquery" />
+/// <reference types="gridstack" />
+
 import {
-  Component, HostBinding, AfterViewInit, ChangeDetectionStrategy, ElementRef, Input, ContentChildren, QueryList, Renderer2, OnInit
+  Component, ChangeDetectionStrategy, ElementRef, Input, ContentChildren, QueryList, Renderer2, OnInit, Output, EventEmitter
 } from '@angular/core';
 import { GridstackItemComponent } from '../gridstack-item/gridstack-item.component';
 import { GridstackService } from '../gridstack.service';
 
-declare let jQuery: any;
-
 @Component({
   selector: 'app-gridstack',
   templateUrl: './gridstack.component.html',
@@ -15,13 +16,12 @@ declare let jQuery: any;
 export class GridstackComponent implements OnInit {
   @ContentChildren(GridstackItemComponent) items: QueryList<GridstackItemComponent>;
 
-  @Input() options: any;
+  @Input() options: GridstackOptions;
+  @Output() change = new EventEmitter<any>();
 
   previousItems: Array<HTMLElement>;
   element: HTMLElement;
 
-  grid: any;
-
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,
@@ -33,6 +33,7 @@ export class GridstackComponent implements OnInit {
   ngOnInit() {
     jQuery(this.element).gridstack(this.options);
     this.gridstackService.grid = jQuery(this.element).data('gridstack');
+    jQuery(this.element).on('change', (event, items) => this.change.emit(items));
   }
 
 }