Angular Gridster

Posted onby admin

Angular implementation of angular-gridster Demo

  1. Angular Gridster Example
  2. Angular Drag And Drop Grid
  3. Angular Gridster2 Example

Requires Angular 8.x

Angular 2 grid example
  1. Angular gridster 2. Most Recent Commit. Related Projects. Javascript (68,838)typescript (10,940)dashboard (446)angularjs (271)angular2 (233)widgets (79) Site. Angular implementation of angular-gridster Demo Requires Angular 11.x.
  2. Angular gridster 2. Most Recent Commit. Related Projects. Javascript (69,694) typescript (11,223) dashboard (455) angularjs (271) angular2 (233) widgets (79) Site. Angular implementation of angular-gridster Demo Requires Angular 11.x.

For other Angular versions check the other branches.

Install

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

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

Angular drag and drop grid

Initialize a simple dashboard:

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

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):

Option 2 (with text selection):

Contributors here

Supporters

Angular Gridster Example

@matpag (Mattia Pagini)Derek

License

Angular Drag And Drop Grid

The MIT License

Angular Gridster2 Example

Copyright (c) 2019 Tiberiu Zuld