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.

Additional steps for System.js

To make Angular2gridster works with System.js you need to provide dedicated configuration in systemjs.config.js. It requires change in map object and 'packages' as follows:

System.config({
  map: {
    // ...
    'rxjs':             'node_modules/rxjs',
    'angular2gridster': 'node_modules/angular2gridster'
  },
  packages: {
    // ...
    'rxjs':             { defaultExtension: 'js' },
    'angular2gridster': { main: 'dist/index.js', defaultExtension: 'js' }
  }
});

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 (more info here):

widgets: Array<any> = [...];
gridsterOptions = {
  lanes: 5, // how many lines (grid cells) dashboard has
  direction: 'vertical', // items floating direction: vertical/horizontal
  dragAndDrop: true, // possible to change items position by drag n drop
  resizable: true // possible to resize items by drag n drop by item edge/corner
};

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 GridsterItemComponent.

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 dragged 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. To do so, you should register listener on drop event that provide an $event.item object that contains all needed data for creating new widget (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

Changing configuration of Gridster after it's initialized is possible by using API of Gridster component. First we need to access GridsterComponent in our component then use setOption method and on the end reload. Maybe it is seams to be complicated, but it isn't:

import { Component, ViewChild } from '@angular/core';
import { GridsterComponent } from 'angular2gridster';

@Component({
  ...
})
export class MyDashboardComponent {
  @ViewChild(GridsterComponent) gridster: GridsterComponent;
  ...
  addLine () {
    this.gridster.setOption('lanes', ++this.gridsterOptions.lanes)
      .reload();
  }
  removeLine () {
    this.gridster.setOption('lanes', --this.gridsterOptions.lanes)
      .reload();
  }
  changeDirection(direction: string) {
    this.gridster.setOption('direction', direction)
      .reload();
  }
  toggleDraggable() {
    this.gridster.setOption('dragAndDrop', gridsterOptions.dragAndDrop)
      .reload();
  }
  toggleResizable() {
    this.gridster.setOption('resizable', gridsterOptions.dragAndDrop)
      .reload();
  }
}

You can update configuration directly in template as well:

  ...
  <input type="checkbox" [(ngModel)]="gridsterOptions.dragAndDrop" value="true"
         (change)="gridster.setOption('dragAndDrop', gridsterOptions.dragAndDrop).reload()"> Draggable

  <input type="checkbox" [(ngModel)]="gridsterOptions.resizable" value="true"
         (change)="gridster.setOption('resizable', gridsterOptions.resizable).reload()"> Resizable

  <input type="radio" [(ngModel)]="gridsterOptions.direction" value="horizontal"
           (change)="gridster.setOption('direction', 'horizontal').reload()"> Horizontal

  <input type="radio" [(ngModel)]="gridsterOptions.direction" value="vertical"
           (change)="gridster.setOption('direction', 'vertical').reload()"> Vertical

  ...

More info about GridsterComponent API in API documentation.

Responsive behaviour

Responsiveness is not a feature out of the box. To make Gridster dashboard react on window resize we need to use GridsterComponent API as follows:

import { Component, HostListener, ViewChild } from '@angular/core';
import { GridsterComponent } from 'angular2gridster';

@Component({
  ...
})
export class MyDashboardComponent {
  @ViewChild(GridsterComponent) gridster: GridsterComponent;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.gridster.reload();
  }
  ...

In near future it's planned to be configurable. More info in Mobile view issue.