angular-gridster2

Angular implementation of angular-gridster Demo

Requires Angular 6.x

For other Angular versions check the other branches.

Install

npm install angular-gridster2 --save

Should work out of the box with webpack, respectively angular-cli.

import{GridsterModule}from'angular-gridster2';
@NgModule({imports: [GridsterModule],
...
})

Browser support

What Angular supports here

How to use

<gridster[options]="options"><gridster-item[item]="item" *ngFor="let item of dashboard"><!-- your content here --></gridster-item></gridster>

Initialize a simple dashboard:

import{GridsterConfig,GridsterItem}from'angular-gridster2';
options: GridsterConfig;
dashboard: Array<GridsterItem>;staticitemChange(item,itemComponent){console.info('itemChanged',item,itemComponent);}staticitemResize(item,itemComponent){console.info('itemResized',item,itemComponent);}ngOnInit(){this.options={itemChangeCallback: AppComponent.itemChange,itemResizeCallback: AppComponent.itemResize,};this.dashboard=[{cols: 2,rows: 1,y: 0,x: 0},{cols: 2,rows: 2,y: 0,x: 2}];}changedOptions(){this.options.api.optionsChanged();}removeItem(item){this.dashboard.splice(this.dashboard.indexOf(item),1);}addItem(){this.dashboard.push({});}

Note: The gridster will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.

Load dynamic components inside the gridster-item

You can load dynamic components in Angular4+ with the help of ng-dynamic-component library

Having iFrame in widgets content

iFrames can interfere with drag/resize of widgets. For a workaround please read this issue #233

Interact with content without dragging

Option 1 (without text selection):

<gridster-item><div(mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
Some content to click without dragging the widget
</div><divclass="item-buttons"><buttonmd-icon-buttonmd-raised-buttonclass="drag-handler"><md-icon>open_with</md-icon></button><buttonmd-icon-buttonmd-raised-buttonclass="remove-button" (click)="removeItem($event, item)"
(touchstart)="removeItem($event, item)" mdTooltip="Remove"><md-icon>clear</md-icon></button></div></gridster-item>

Option 2 (with text selection):

<gridster-item><divclass="gridster-item-content">
Some content to select and click without dragging the widget
</div><divclass="item-buttons"><buttonmd-icon-buttonmd-raised-buttonclass="drag-handler"><md-icon>open_with</md-icon></button><buttonmd-icon-buttonmd-raised-buttonclass="remove-button" (click)="removeItem($event, item)"
(touchstart)="removeItem($event, item)" mdTooltip="Remove"><md-icon>clear</md-icon></button></div></gridster-item>

Contributors here

Supporters

@matpag (Mattia Pagini)

License

The MIT License

Copyright (c) 2018 Tiberiu Zuld