Note This is a fork of Angular2Gridster. It is updated to Angular 17 with some minor tweaks and updates added.
Angular implementation of the well-known Gridster (no jQuery, no external libraries, only Angular and Rx.js).
- Version 18.x works with Angular 18.x.
- Version 17.x works with Angular 17.x.
- Version 16.x works with Angular 16.x.
- Version 15.x works with Angular 15.x.
- Version 14.x works with Angular 14.x.
- Version 13.x works with Angular 13.x.
- Version 12.x works with Angular 12.x.
- Version 11.x works with Angular 11.x.
- Version 10.x works with Angular 10.x.
- Version 9.x works with Angular 9.x.
- Version 8.x works with Angular 8.x.
- Version 7.x works with Angular 7.x.
- Version 6.x works with Angular 6.x.
- Version 5.x works with Angular 5.x.
- Version 4.x works with Angular 4.x.
Versions 1.x and 0.x work only with Angular 4.x, but the newest states you can find in v4.x.
npm install @hyperviewhq/angular2gridster
Once installed you need to import our module: The example imports in AppModule, but it could also be imported in any other module - depends on where you want to use it.
To make Angular2gridster works with System.js you need to provide a dedicated configuration in systemjs.config.js
.
It requires a change in `map`` object and 'packages' as follows:
System.config({
map: {
// ...
rxjs: 'node_modules/rxjs',
angular2gridster: 'node_modules/@hyperviewhq/angular2gridster',
},
packages: {
// ...
rxjs: {defaultExtension: 'js'},
angular2gridster: {main: 'dist/index.js', defaultExtension: 'js'},
},
});
<ngx-gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }">
<ngx-gridster-item
*ngFor="let widget of widgets"
[(x)]="widget.x"
[(y)]="widget.y"
[(w)]="widget.w"
[(h)]="widget.h"
>
<!-- some content -->
</ngx-gridster-item>
</ngx-gridster>
For version before 6.0.0:
<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>
widgets: Array<any> = [...];
gridsterOptions = {
lanes: 2, // how many lines (grid cells) dashboard has
direction: 'vertical', // items floating direction: vertical/horizontal/none
floating: false, // default=true - prevents items to float according to the direction (gravity)
dragAndDrop: false, // possible to change items position by drag n drop
resizable: false, // possible to resize items by drag n drop by item edge/corner
useCSSTransforms: true, // Uses CSS3 translate() instead of position top/left - significant performance boost.
responsiveSizes: true, // allow to set different item sizes for different breakpoints
// ResponsiveOptions can overwrite default configuration with any option available for specific breakpoint.
responsiveOptions: [
{
breakpoint: 'sm',
lanes: 3
},
{
breakpoint: 'md',
minWidth: 768,
lanes: 4,
dragAndDrop: true,
resizable: true
},
{
breakpoint: 'lg',
lanes: 6,
dragAndDrop: true,
resizable: true
},
{
breakpoint: 'xl',
minWidth: 1800,
lanes: 8,
dragAndDrop: true,
resizable: true
}
]
};
Warning
If you use responsiveOptions
, then item coords will be assigned to different breakpoint attributes:
- till
sm
(480px), it usesx
andy
attributes -
sm
(480px - 768px), it usesxSm
andySm
attributes -
md
(768px - 1250px), it usesxMd
andyMd
attributes -
lg
(1250px - 1800px), it usesxLg
andyLg
attributes - from
xl
(1800px), it usesxXl
andyXl
attributes
(widths in px are only example and works for `responsiveOptions in the example above).
If you set responsiveSizes: true
, item size can be different for different breakpoints. In this case, size will be bound to following attributes:
- till
sm
(480px), it usesw
andh
attributes -
sm
(480px - 768px), it useswSm
andhSm
attributes -
md
(768px - 1250px), it useswMd
andhMd
attributes -
lg
(1250px - 1800px), it useswLg
andhLg
attributes - from
xl
(1800px), it useswXl
andhXl
attributes
Clone or download this repository and just run:
npm i
npm run build
npm start
Go to: http://localhost:4200/
If somebody will have compilation problems please add an issue (if not yet created). I will try to fix it as soon as possible. The angular compiler has still some issues open and it is changing frequently.
As a temporary solution copy files from the/``projects/
angular2gridster/src/lib` folder to dedicated folder in your project.
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox:
The project is in development so don't hesitate to write any questions or suggestions on issue list. I look forward to getting a response from you.
This project was created on the idea of GridList](https://github.com/hootsuite/grid). Great alternative for Gridster.