{"id":13580875,"url":"https://github.com/tiberiuzuld/angular-gridster2","last_synced_at":"2025-05-13T16:08:19.504Z","repository":{"id":38359669,"uuid":"49567579","full_name":"tiberiuzuld/angular-gridster2","owner":"tiberiuzuld","description":"Angular gridster 2","archived":false,"fork":false,"pushed_at":"2024-12-07T19:56:01.000Z","size":80029,"stargazers_count":1315,"open_issues_count":332,"forks_count":382,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-05-08T13:42:21.630Z","etag":null,"topics":["angular2","angularjs","dashboard","gridster","javascript","typescript","widgets"],"latest_commit_sha":null,"homepage":"https://tiberiuzuld.github.io/angular-gridster2","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiberiuzuld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-13T10:43:19.000Z","updated_at":"2025-05-01T20:38:31.000Z","dependencies_parsed_at":"2024-09-27T17:04:08.130Z","dependency_job_id":"f56b94e7-add5-4554-85d4-7a2362fbcd01","html_url":"https://github.com/tiberiuzuld/angular-gridster2","commit_stats":{"total_commits":656,"total_committers":55,"mean_commits":"11.927272727272728","dds":"0.14329268292682928","last_synced_commit":"f82c37caab9d599aa493930ebd8e887ecfddb161"},"previous_names":[],"tags_count":262,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-gridster2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-gridster2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-gridster2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-gridster2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiberiuzuld","download_url":"https://codeload.github.com/tiberiuzuld/angular-gridster2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253576267,"owners_count":21930169,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","angularjs","dashboard","gridster","javascript","typescript","widgets"],"created_at":"2024-08-01T15:01:55.885Z","updated_at":"2025-05-13T16:08:19.484Z","avatar_url":"https://github.com/tiberiuzuld.png","language":"TypeScript","readme":"# angular-gridster2\n\n[![npm version](https://badge.fury.io/js/angular-gridster2.svg)](https://badge.fury.io/js/angular-gridster2)\n![Node CI](https://github.com/tiberiuzuld/angular-gridster2/actions/workflows/deploy-demo.yml/badge.svg)\n[![downloads](https://img.shields.io/npm/dm/angular-gridster2.svg)](https://www.npmjs.com/package/angular-gridster2)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)\n\n### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2)\n\n### Requires Angular 19.x\n\n### For other Angular versions check the other branches.\n\n## Browser support\n\nWhat Angular supports [here](https://github.com/angular/angular)\n\n## Install\n\n`npm install angular-gridster2 --save`\n\n## How to use\n\n```javascript\nimport {Component} from '@angular/core';\nimport {GridsterComponent, GridsterItemComponent} from 'angular-gridster2';\n\n@Component({\n  standalone: true,\n  imports: [GridsterComponent, GridsterItemComponent],\n  ...\n})\n```\n\n```html\n\u003cgridster [options]=\"options\"\u003e\n  @for (item of dashboard; track item) {\n  \u003cgridster-item [item]=\"item\"\u003e\n    \u003c!-- your content here --\u003e\n  \u003c/gridster-item\u003e\n  }\n\u003c/gridster\u003e\n```\n\nInitialize a simple dashboard:\n\n```typescript\n   import { GridsterConfig, GridsterItem }  from 'angular-gridster2';\n   options: GridsterConfig;\n   dashboard: Array\u003cGridsterItem\u003e;\n\n   static itemChange(item, itemComponent) {\n     console.info('itemChanged', item, itemComponent);\n   }\n\n   static itemResize(item, itemComponent) {\n     console.info('itemResized', item, itemComponent);\n   }\n\n   ngOnInit() {\n     this.options = {\n       itemChangeCallback: AppComponent.itemChange,\n       itemResizeCallback: AppComponent.itemResize,\n     };\n\n     this.dashboard = [\n       {cols: 2, rows: 1, y: 0, x: 0},\n       {cols: 2, rows: 2, y: 0, x: 2}\n     ];\n   }\n\n   changedOptions() {\n     this.options.api.optionsChanged();\n   }\n\n   removeItem(item) {\n     this.dashboard.splice(this.dashboard.indexOf(item), 1);\n   }\n\n   addItem() {\n     this.dashboard.push({});\n   }\n```\n\n##### 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.\n\n### Having iFrame in widgets content\n\niFrames can interfere with drag/resize of widgets. For a workaround please read [this issue #233](https://github.com/tiberiuzuld/angular-gridster2/issues/233)\n\n### Interact with content without dragging\n\nOption 1 (without text selection):\n\n```html\n\u003cgridster-item\u003e\n  \u003cdiv (mousedown)=\"$event.stopPropagation()\" (touchstart)=\"$event.stopPropagation()\"\u003eSome content to click without dragging the widget\u003c/div\u003e\n  \u003cdiv class=\"item-buttons\"\u003e\n    \u003cbutton class=\"drag-handler\"\u003e\n      \u003cmd-icon\u003eopen_with\u003c/md-icon\u003e\n    \u003c/button\u003e\n    \u003cbutton class=\"remove-button\" (click)=\"removeItem($event, item)\" (touchstart)=\"removeItem($event, item)\"\u003e\n      \u003cmd-icon\u003eclear\u003c/md-icon\u003e\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/gridster-item\u003e\n```\n\nOption 2 (with text selection):\n\n```html\n\u003cgridster-item\u003e\n  \u003cdiv class=\"gridster-item-content\"\u003eSome content to select and click without dragging the widget\u003c/div\u003e\n  \u003cdiv class=\"item-buttons\"\u003e\n    \u003cbutton class=\"drag-handler\"\u003e\n      \u003cmd-icon\u003eopen_with\u003c/md-icon\u003e\n    \u003c/button\u003e\n    \u003cbutton class=\"remove-button\" (click)=\"removeItem($event, item)\" (touchstart)=\"removeItem($event, item)\"\u003e\n      \u003cmd-icon\u003eclear\u003c/md-icon\u003e\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/gridster-item\u003e\n```\n\n### Contributors [here](https://github.com/tiberiuzuld/angular-gridster2/graphs/contributors)\n\n### [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)\n\n### License\n\nThe MIT License\n\nCopyright (c) 2024 Tiberiu Zuld\n","funding_links":["https://www.paypal.me/tiberiuzuld"],"categories":["TypeScript","Third Party Components"],"sub_categories":["Layout"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiberiuzuld%2Fangular-gridster2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiberiuzuld%2Fangular-gridster2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiberiuzuld%2Fangular-gridster2/lists"}