angular-gridster2
Angular implementation of angular-gridster Demo
Requires Angular 17.x
For other Angular versions check the other branches.
Browser support
What Angular supports hereInstall
npm install angular-gridster2 --save
How to use
```javascript import {NgForOf} from '@angular/common'; import {Component} from '@angular/core'; import {GridsterComponent, GridsterItemComponent} from 'angular-gridster2'; @Component({ standalone: true, imports: NgForOf, GridsterComponent, GridsterItemComponent, ... }) ``` ```html options="options"> item="item" ngFor="let item of dashboard"><!-- your content here -->import { GridsterConfig, GridsterItem } from 'angular-gridster2';options: GridsterConfig;dashboard: Array<GridsterItem>;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 #233Interact with content without dragging
Option 1 (without text selection): ```htmlSome content to click without dragging the widget
<button md-icon-button md-raised-button class="drag-handler"><md-icon>open_with</md-icon></button><button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)" (touchstart)="removeItem($event, item)" mdTooltip="Remove"><md-icon>clear</md-icon></button>Some content to select and click without dragging the widget
<button md-icon-button md-raised-button class="drag-handler"><md-icon>open_with</md-icon></button><button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)" (touchstart)="removeItem($event, item)" mdTooltip="Remove"><md-icon>clear</md-icon></button>