Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tiberiuzuld/angular-gridster2
Angular gridster 2
https://github.com/tiberiuzuld/angular-gridster2
angular2 angularjs dashboard gridster javascript typescript widgets
Last synced: 2 days ago
JSON representation
Angular gridster 2
- Host: GitHub
- URL: https://github.com/tiberiuzuld/angular-gridster2
- Owner: tiberiuzuld
- License: mit
- Created: 2016-01-13T10:43:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-01T14:39:00.000Z (11 days ago)
- Last Synced: 2024-12-03T17:06:41.082Z (9 days ago)
- Topics: angular2, angularjs, dashboard, gridster, javascript, typescript, widgets
- Language: TypeScript
- Homepage: https://tiberiuzuld.github.io/angular-gridster2
- Size: 76 MB
- Stars: 1,283
- Watchers: 42
- Forks: 377
- Open Issues: 325
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - angular-gridster2 - Angular gridster 2. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-gridster2 - Angular gridster 2. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-gridster2 - Angular gridster 2. (Table of contents / Third Party Components)
README
# angular-gridster2
[](https://badge.fury.io/js/angular-gridster2)
[](https://www.npmjs.com/package/angular-gridster2)
[](https://www.paypal.me/tiberiuzuld)
### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2)
### Requires Angular 19.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 {GridsterComponent, GridsterItemComponent} from 'angular-gridster2';
@Component({
standalone: true,
imports: [GridsterComponent, GridsterItemComponent],
...
})
```
```html
@for (item of dashboard; track item) {
}
```
Initialize a simple dashboard:
```typescript
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](https://github.com/tiberiuzuld/angular-gridster2/issues/233)
### Interact with content without dragging
Option 1 (without text selection):
```html
Some content to click without dragging the widget
```
Option 2 (with text selection):
```html
Some content to select and click without dragging the widget
```
### Contributors [here](https://github.com/tiberiuzuld/angular-gridster2/graphs/contributors)
### [](https://www.paypal.me/tiberiuzuld)
### License
The MIT License
Copyright (c) 2024 Tiberiu Zuld