Angular implementation of angular-gridster Demo
What Angular supports here
npm install angular-gridster2 --save
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {GridsterComponent, GridsterItemComponent} from 'angular-gridster2';
@Component({
standalone: true,
imports: [NgForOf, GridsterComponent, GridsterItemComponent],
...
})<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard">
<!-- your content here -->
</gridster-item>
</gridster>Initialize a simple dashboard:
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.
iFrames can interfere with drag/resize of widgets. For a workaround please read this issue #233
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 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>
</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 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>
</div>
</gridster-item>Contributors here
The MIT License
Copyright (c) 2023 Tiberiu Zuld
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent