ng2-gridstack

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

Usage

Requirements

• gridstack.js

Install

$ npm install ng2-gridstack --save

Basic Usage

Import the module...

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

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 */
@import "~gridstack/dist/gridstack.min.css";

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)"
    [addButtonText]="'Add card'"
    [saveButtonText]="'Save panel'"
    [deleteButtonText]="'Delete panel'"
    [deleteCardButtonText]="'Delete card'">
</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)

• 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).