angular-gridster2
Demo
Angular implementation of angular-gridstermaster branch
Angular 5.x library is4.x branch
Angular 4.x library is2.4.x branch (no longer maintained)
Angular 2.x library is1.x branch
AngularJS >=1.5.x library isInstall
npm install angular-gridster2 --save
Should work out of the box with webpack, respectively angular-cli.
; @
Browser support
What Angular supports here
How to use
<!-- your content here -->
Initialize a simple dashboard:
; options: GridsterConfig; dashboard: Array<GridsterItem>; static itemChangeitem, itemComponent static itemResizeitem, itemComponent ngOnInit changedOptions removeItemitem addItem
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.
Default Grid Options:
; ;
Gridster options api
this.options.api.resize; // call if size of container changes. Grid will auto resize on window resize. this.options.api.optionsChanged; // call on change of options after initialization this.options.api.getNextPossiblePositionitem: GridsterItem; // call to get a viable position for item. Returns true if found // if you want to push items from code use the GridsterPush service myMethodgridsterItemComponent: GridsterItemComponent
Gridster item options:
gridster-item
Load dynamic components inside the 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):
Some content to click without dragging the widget open_with clear
Option 2 (with text selection):
Some content to select and click without dragging the widget open_with clear
angular-gridster
angular-gridster2 inspired byLicense
The MIT License
Copyright (c) 2018 Tiberiu Zuld