# angular-gridster2

> Angular gridster 2

Latest version **22.0.0** (published 2026-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-gridster2
pnpm add angular-gridster2
yarn add angular-gridster2
bun add angular-gridster2
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 22.0.0 |
| Published | 2026-06-26 |
| First published | 2016-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 469 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1348 |
| Maintainers | tiberiuzuld |
| Keywords | angular, angular2, typescript, dashboard, gridster, gridster2, resize, drag&drop, widgets |

## Links

- npm: https://www.npmjs.com/package/angular-gridster2
- Repository: https://github.com/tiberiuzuld/angular-gridster2
- Homepage: https://tiberiuzuld.github.io/angular-gridster2
- Issues: https://github.com/tiberiuzuld/angular-gridster2/issues
- npm.io page: https://npm.io/package/angular-gridster2

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 22.0.0 (latest) — 2026-06-26
- 18.0.0-z (zoneless) — 2024-06-17
- 14.1.5 (angular14) — 2023-03-21
- 13.3.2 (angular13) — 2023-02-01
- 11.2.1 (angular11) — 2022-02-27
- 8.4.2 (version8) — 2020-12-05
- 9.3.4 (angular9) — 2020-10-25
- 5.3.4 (angular5) — 2018-08-25
- 3.19.0 (angular4) — 2018-02-10
- 1.21.0 (angular1) — 2018-01-13
- 2.4.20 (angular2) — 2017-12-03
- 21.0.1 — 2026-01-09
- 21.0.0 — 2025-11-29
- 20.2.4 — 2025-11-22
- 20.2.3 — 2025-10-16
- … 240 more at https://npm.io/package/angular-gridster2/versions

## README

# angular-gridster2

[![npm version](https://badge.fury.io/js/angular-gridster2.svg)](https://badge.fury.io/js/angular-gridster2)
![Node CI](https://github.com/tiberiuzuld/angular-gridster2/actions/workflows/deploy-demo.yml/badge.svg)
[![downloads](https://img.shields.io/npm/dm/angular-gridster2.svg)](https://www.npmjs.com/package/angular-gridster2)
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)

### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2)

### Requires Angular 22.x

### For other Angular versions check the other branches.

## Browser support

What Angular supports [here](https://github.com/angular/angular)

## Install

`npm install angular-gridster2 --save`

## How to use

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

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

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

Initialize a simple dashboard:

```typescript
   import { GridsterConfig, GridsterItemConfig }  from 'angular-gridster2';
   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 [this issue #233](https://github.com/tiberiuzuld/angular-gridster2/issues/233)

### Interact with content without dragging

Option 1 (without text selection):

```html
<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):

```html
<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](https://github.com/tiberiuzuld/angular-gridster2/graphs/contributors)

### [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)

### License

The MIT License

Copyright (c) 2026 Tiberiu Zuld

---
_Source: https://npm.io/package/angular-gridster2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._