A gridstack component for Angular2. Based on gridstack.js.

##Requirements

• gridstack.js
• @angular/core

##Install

$ npm install ng2-gridstack

##Basic Usage

Using SystemJs :

System.config({ paths: { (...) }, map: { 'ng2-gridstack': 'npm:ng2-gridstack', (...) }, packages: { app: { 'ng2-gridstack': { main: './ng2-gridstack.js', defaultExtension: 'js' }, (...) }

Import the component in your module

import { GridStackComponent, GridStackItemDirective } from 'ng2-gridstack' (...) @NgModule({ imports: [ (...) ], declarations: [ GridStackComponent, GridStackItemDirective, (...) ], providers: [ (...) ] }) export class YourModule { }

ng2-gridstack can be used in two ways, either by letting the component add the items for you, or by building your own items.

####First mode

<gridStack w="12" animate="true" buttonClass="btn btn-default" allowEditing="true" [options]="gridstackOptions" [items]="panel.Cards" (addFunction)="addCard()" (saveFunction)="save($event)" (deleteFunction)="deletePanel()" (deleteCardFunc)="deleteCard($event)"> </gridStack>

####Second mode

<gridStack w="12" animate="true"> <div gridStackItem [x]="0" [y]="0" [h]="3" [w]="3" [customid]="10"> <h1>Hello</h1> </div> </gridStack>

###Inputs/Outputs

• w : number of items that can fit in a row.
• animate : grid animation on/off.
• options (optional) : an associative array of gridstack options.
• allowEditing : allow the edition of items on double click (false by default).
• items (optional) : an array of objects that have the following properties.
  • x
  • y
  • width
  • height
  • customid
  • content (optional) The following are parameters that, if set, will display a button to call the specified function.
• addFunction (optional) : this function should add a new item to the array passed in the items parameter.
• saveFunction (optional) : calls the specified function with the updated array of items as parameter, so that you can save it.
• deleteFunction (optional) : function to call when deleting the whole panel.
• deleteCardFunc (optional) : function to call when a card is deleted (its customid is passed as a parameter).