angular-gridster2-plus

Angular implementation of angular-gridster Demo · Documentation

Community-maintained fork of angular-gridster2 by Tiberiu Zuld, which is no longer actively developed. It keeps the same API and integrates the fixes contributed by the community.

Requires Angular 22.x

Browser support

What Angular supports here

Install

npm install angular-gridster2-plus --save

Migrating from angular-gridster2

The API is the same: replace the package and update the import paths.

npm uninstall angular-gridster2
npm install angular-gridster2-plus --save

// before: import { Gridster, GridsterItem } from 'angular-gridster2';
import { Gridster, GridsterItem } from 'angular-gridster2-plus';

How to use

import {Component} from '@angular/core';
import {Gridster, GridsterItem} from 'angular-gridster2-plus';

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

<gridster [options]="options">
  @for (item of dashboard; track item) {
  <gridster-item [item]="item">
    <!-- your content here -->
  </gridster-item>
  }
</gridster>

Initialize a simple dashboard:

   import { GridsterConfig, GridsterItemConfig }  from 'angular-gridster2-plus';
   options: GridsterConfig;
   dashboard: GridsterItemConfig[];

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

   static itemResize(item: GridsterItemConfig, 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 = Object.assign({}, this.options);
   }

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

   addItem() {
     this.dashboard.push({cols: 1, rows: 1, y: 0, x: 0});
   }

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.

Having iFrame in widgets content

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

Interact with content without dragging

Option 1 (without text selection):

<gridster-item>
  <div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">Some content to click without dragging the widget</div>
  <div class="item-buttons">
    <button class="drag-handler">
      <md-icon>open_with</md-icon>
    </button>
    <button class="remove-button" (click)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
      <md-icon>clear</md-icon>
    </button>
  </div>
</gridster-item>

Option 2 (with text selection):

<gridster-item>
  <div class="gridster-item-content">Some content to select and click without dragging the widget</div>
  <div class="item-buttons">
    <button class="drag-handler">
      <md-icon>open_with</md-icon>
    </button>
    <button class="remove-button" (click)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
      <md-icon>clear</md-icon>
    </button>
  </div>
</gridster-item>

Contributors here

Originally created by Tiberiu Zuld as angular-gridster2.

License

The MIT License

Copyright (c) 2026 Tiberiu Zuld Copyright (c) 2026 Gionata Legrottaglie