To help you get started, we've collected the most common ways that angular-gridster2 is being used within popular public projects.

tiberiuzuld / angular-gridster2 / src / app / sections / api / api.component.ts View on Github

pushItem() {
    const push = new GridsterPush(this.itemToPush); // init the service
    this.itemToPush.$item.rows += 4; // move/resize your item
    if (push.pushItems(push.fromNorth)) { // push items from a direction
      push.checkPushBack(); // check for items can restore to original position
      push.setPushedItems(); // save the items pushed
      this.itemToPush.setSize();
      this.itemToPush.checkItemChanges(this.itemToPush.$item, this.itemToPush.item);
    } else {
      this.itemToPush.$item.rows -= 4;
      push.restoreItems(); // restore to initial state the pushed items
    }
    push.destroy(); // destroy push instance
    // similar for GridsterPushResize and GridsterSwap
  }
}

View more ways to use angular-gridster2

angular-gridster2

Angular implementation of angular-gridster Demo

Requires Angular 19.x

For other Angular versions check the other branches.

Browser support

What Angular supports here

Install

npm install angular-gridster2 --save

How to use

import {Component} from '@angular/core';
import {GridsterComponent, GridsterItemComponent} from 'angular-gridster2';

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

  @for (item of dashboard; track item) {
  
    
  
  }

Initialize a simple dashboard:

   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.

Having iFrame in widgets content

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

Interact with content without dragging

Option 1 (without text selection):

  <div>Some content to click without dragging the widget</div>
  <div class="item-buttons">
    <button class="drag-handler">
      open_with
    </button>
    <button class="remove-button">
      clear
    </button>
  </div>

Option 2 (with text selection):

  <div class="gridster-item-content">Some content to select and click without dragging the widget</div>
  <div class="item-buttons">
    <button class="drag-handler">
      open_with
    </button>
    <button class="remove-button">
      clear
    </button>
  </div>

Contributors here

License

The MIT License

Copyright (c) 2024 Tiberiu Zuld