angular-gridster2

!Node CI

$3

$3

$3

Browser support

What Angular supports here

Install

npm install angular-gridster2 --save

How to use

``javascript
import {Component} from '@angular/core';
import {Gridster, GridsterItemComponent} from 'angular-gridster2';

@Component({
standalone: true,
imports: [Gridster, GridsterItemComponent],
...
})
`

`html

@for (item of dashboard; track item) {



}

`

Initialize a simple dashboard:

`typescript
import { GridsterConfig, GridsterItem } from 'angular-gridster2';
options: GridsterConfig;
dashboard: Array;

static itemChange(item, itemComponent) {
console.info('itemChanged', item, itemComponent);
}

static itemResize(item, itemComponent) {
console.info('itemResized', item, itemComponent);
}

ngOnInit() {
this.options = {
itemChangeCallback: AppComponent.itemChange,
itemResizeCallback: AppComponent.itemResize,
};

this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2}
];
}

changedOptions() {
this.options.api.optionsChanged();
}

removeItem(item) {
this.dashboard.splice(this.dashboard.indexOf(item), 1);
}

addItem() {
this.dashboard.push({});
}
`

##### Note: The gridster will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.

$3

iFrames can interfere with drag/resize of widgets. For a workaround please read this issue #233

$3

Option 1 (without text selection):

`html



`html



$3

$3

$3

The MIT License

Copyright (c) 2026 Tiberiu Zuld