Getting started

Contents

1. Installation
2. Dashboard with drag and resize
3. Adding widgets by drag from outside
4. Dynamic dashboard configuration change
5. Responsive behaviour

Installation

npm install angular2gridster

Once installed you need to import our module:

...
import { GridsterModule } from 'angular2gridster';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    GridsterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The example it imports in AppModule, but it could also be imported in any other module - depends where you want to use it.

Dashboard with drag and resize

It's enough to place following code in component your want to render dashboard:

  <gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }">

    <gridster-item *ngFor="let widget of widgets"
      [(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h">
      <!--some content-->
    </gridster-item>

  </gridster>

Gridster configuration can be defined as follows:

widgets: Array<any> = [...];
gridsterOptions = {
    lanes: 5,
    direction: 'vertical',
    dragAndDrop: true,
    resizable: true
  };

DraggableOptions is optional configuration. In this example it defines that dragging widgets should be only possible by element with given class. By default drag is possible by any place of GridsterItem component.

Adding widgets by drag from outside

Dynamic dashboard configuration change

Responsive behaviour