ng2-gridstack
A gridstack component for Angular2+. Based on gridstack.js 0.3.0.
Usage
Requirements
Install
$ npm install ng2-gridstack --save
Basic Usage
Import the module...
and load gridstack's css. Example using the global css file from AngularCLI
/* You can add global styles to this file, and also import other style files */;
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
Second mode
Hello
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)
-
addButtonText (optional) : If present, will display a button that triggers addFunction.
-
saveButtonText (optional) : If present, will display a button that triggers saveFunction.
-
deleteButtonText (optional) : If present, will display a button that triggers deleteFunction.
-
deleteCardButtonText (optional) : If present, will display a button that triggers deleteCardFunc.
-
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).