@rybos/angular2gridster
Version:
[](https://badge.fury.io/js/angular2gridster)
180 lines (143 loc) • 6.21 kB
Markdown
# angular2gridster
[](https://badge.fury.io/js/angular2gridster)
> **Note**
> This is a fork of [Angular2Gridster](https://github.com/swiety85/angular2gridster). It is updated to Angular 15 with some minor tweaks and updates added.
Angular implementation of the well-known Gridster (no jQuery, no external libraries, only Angular and Rx.js).
## Versions:
- 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**.
## Installation
```shell
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.
### Additional steps for System.js
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:
```js
System.config({
map: {
// ...
rxjs: 'node_modules/rxjs',
angular2gridster: 'node_modules/@hyperviewhq/angular2gridster',
},
packages: {
// ...
rxjs: {defaultExtension: 'js'},
angular2gridster: {main: 'dist/index.js', defaultExtension: 'js'},
},
});
```
## Example usage
```html
<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:
```html
<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>
```
```js
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 uses `x` and `y` attributes
- `sm` (480px - 768px), it uses `xSm` and `ySm` attributes
- `md` (768px - 1250px), it uses `xMd` and `yMd` attributes
- `lg` (1250px - 1800px), it uses `xLg` and `yLg` attributes
- from `xl` (1800px), it uses `xXl` and `yXl` 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 uses `w` and `h` attributes
- `sm` (480px - 768px), it uses `wSm` and `hSm` attributes
- `md` (768px - 1250px), it uses `wMd` and `hMd` attributes
- `lg` (1250px - 1800px), it uses `wLg` and `hLg` attributes
- from `xl` (1800px), it uses `wXl` and `hXl` attributes
## Demo
Clone or download this repository and just run:
```js
npm i
npm run build
npm start
```
Go to: http://localhost:4200/
## Compilation problems
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.
## Issues
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:
[](https://codesandbox.io/s/angular-otned?fontsize=14)
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.
## Origin
This project was created on the idea of [GridList](https://github.com/hootsuite/grid)](https://github.com/hootsuite/grid). Great alternative for Gridster.