@khajegan/angular2gridster
v17.0.2
Published
angular2gridster compatible with Angular 17.0.7 and rxjs 7.5.0 [![npm version](https://badge.fury.io/js/angular2gridster.svg)](https://badge.fury.io/js/angular2gridster)
Downloads
3
Readme
#1 angular2gridster (Angular 17.0.2)
Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js). Demo.
More comprehensive documentation is available in Wiki.
Development progress can be tracked in Milestones and in Project board.
Versions:
- 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.
Installation
npm install @khajegan/angular2gridster
Once installed you need to import our module:
...
import { GridsterModule } from 'angular2gridster';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
GridsterModule.forRoot() // .forRoot() is required since version v4+
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The example it imports in AppModule, but it could also be imported in any other module - depends where you want to use it.
Additional steps for System.js
To make Angular2gridster works with System.js you need to provide dedicated configuration in systemjs.config.js
.
It requires change in map
object and 'packages' as follows:
System.config({
map: {
// ...
rxjs: 'node_modules/rxjs',
angular2gridster: 'node_modules/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 usesx
andy
attributes sm
(480px - 768px), it usesxSm
andySm
attributesmd
(768px - 1250px), it usesxMd
andyMd
attributeslg
(1250px - 1800px), it usesxLg
andyLg
attributes- from
xl
(1800px), it usesxXl
andyXl
attributes
(widths in px are only example and works for `responsiveOptions in example above).
If you set responsiveSizes: true
, item size can be different for different breakpoints. In this case size will be binded to following attributes:
- till
sm
(480px), it usesw
andh
attributes sm
(480px - 768px), it useswSm
andhSm
attributesmd
(768px - 1250px), it useswMd
andhMd
attributeslg
(1250px - 1800px), it useswLg
andhLg
attributes- from
xl
(1800px), it useswXl
andhXl
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. Angular compiler has still some issues opened and it is changing frequently.
As a temporary solution copy files from /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 writte any questions or suggestion on issue list. I look forward to get a response from you.
Origin
This project was created on idea of GridList. Great alternative for Gridster.