angular2gridster

Note This is a fork of Angular2Gridster. It is updated to Angular 20+ 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:

Major versions of this library work with the corresponding Angular major version. For example:

Version 20.x of angular2gridster works with Angular 20.x.

Versions 1.x and 0.x of this library work only with Angular 4.x.

Installation

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:

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

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

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:

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). Great alternative for Gridster.

Package detail

@hyperviewhq/angular2gridster

readme