ng2-gridstack
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    ng2-gridstack

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

    Usage

    Requirements

    Install

    NPM version

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

    Keywords

    none

    Install

    npm i ng2-gridstack

    DownloadsWeekly Downloads

    45

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • gperouffe