-
Notifications
You must be signed in to change notification settings - Fork 75
Home
It is an Angular 2 (or higher) module that provide set of components and directives to render and manage a board of widgets. The most common use case for this is administration dashboards with widgets. The components provides a lot of freedom and elasticity for usage, therefore it can be used in many different cases. The module provide following components/directives:
- GridsterComponent - responsible for rendering board and gathering items (widgets) represented by GridsterItemComponents
- GridsterItemComponent - represets dashboard widgets. It provides different set of features like dragging, resizing etc. This component is integral part of GridsterComponent and can only be rendered inside the board.
- GridsterItemPrototypeDirective - tool for adding new items in the board by drag and drop "prototype" element.
Learn more about in Getting started.
Common Gridster project is well known solution that helps developers to provide easy configurable and manageable dashboard solution.
This project is not Angular 2 reflection of Gridster jQuery plugin but dedicated solution that follows some parts of the famous Gridster. The core engine is partly taken from GridList project, that is great alternative for "normal" Gridster. The GridList provides set of points "FAQ: Why not gridster?" that proves advantage over Gridster, and most of them fit this project as well.
Other the that, it has following advantages over alternatives:
- placeholder - every pending change of gridster item (e.g. while dragging or resizing) renders placeholder that shows potential state of widgets if change will be ended
- repositioning widgets UX improvements - changing place of widget can be done by one drag and drop gesture. In case when space is occupied by other widgets, component reflows widgets positions to make space for one the user drags.
- swapping and pushing at once - component will choose items floating strategy: "push" or "swap", according to what is the most optimal for the user. Most of "Gridster" solutions allows to chose one of these two.
- prevents unwanted items position change - in many Gridster solutions "swapping" changes/destroys the position of items while item is moved above others - event if it's moved back to the original position (canceled), other items position are modified, that creates mess on the dashboard after couple actions. Angular2gridster reduces surrounding items moves to minimum. Also drag and drop item back to original position will not change any position of other items.
- resizing widgets UX improvements - widget can be resized in every direction by drag n drop by handler on widgets any edge or corner. Like in case of repositioning - in case of resize space is occupied, component reflows widgets positions to make space for one the user resizes. In many cases the user must first reposition element to change it's position and than resize, in our case it's always one gesture.
- performance optimization - all components uses "onPush" ChangeDetectionStrategy. It also reduces amounts of change detection loops by using power of NgZone in places that is not necessary (e.g. mousemove event is triggered very frequently and by default it calls "detectChange" - in case of more complex UI, it can generate performance issues)
This project was created on top of engine of great GridList project. Angular2Gridster uses partly functions and patterns of GridList library - great alternative for Gridster. The concept is similar, but it has a lot of improvements in core implementations that are essential for end usage.