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 you 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

Angular2gridster module provide possibility to add new item to dashboard by drag n drop. By this solution user can by one gesture add widget and chose on which position he wants to place it. This function similar to one available on Android system - dragging widget from Widget Bar to Dashboard. Enabling this solution is as simple as creating set of elements that will be used as widget prototype and assign gridsterItemPrototype directive:

    <div gridsterItemPrototype [config]="{helper: true}" [w]="2" [h]="1" 
                               (drop)="addWidget($event)"></div>

Config attribute has helper option that if set on true, element it self will not be dragging but clone that will be created on drag start.

Directive itself will not add any widget to Dashboard, so you have to do it manually, in what ever format you want. To do so, you should use drop which is called on element drop on Gridster and provide an $event object that has needed data (coords, size, etc.):

addWidget(event: any) {
    this.widgets.push({
      x: event.item.x,
      y: event.item.y,
      w: event.item.w,
      h: event.item.h,
      ...
    });
}

Dynamic dashboard configuration change

Responsive behaviour