{"id":15295283,"url":"https://github.com/apollossc/ng2-gridstack","last_synced_at":"2025-04-13T15:58:59.115Z","repository":{"id":65458186,"uuid":"82277069","full_name":"ApolloSSC/ng2-gridstack","owner":"ApolloSSC","description":"A gridstack component for Angular2+","archived":false,"fork":false,"pushed_at":"2017-11-23T11:59:29.000Z","size":35,"stargazers_count":11,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-24T20:42:07.685Z","etag":null,"topics":["angular","angular2","angular4","cards","dashboard","drag-and-drop","draggable","frontend","gridstack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ApolloSSC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-17T08:52:47.000Z","updated_at":"2023-05-06T12:19:19.000Z","dependencies_parsed_at":"2023-01-24T13:15:30.411Z","dependency_job_id":null,"html_url":"https://github.com/ApolloSSC/ng2-gridstack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApolloSSC%2Fng2-gridstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApolloSSC%2Fng2-gridstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApolloSSC%2Fng2-gridstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ApolloSSC%2Fng2-gridstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ApolloSSC","download_url":"https://codeload.github.com/ApolloSSC/ng2-gridstack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741196,"owners_count":21154252,"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":["angular","angular2","angular4","cards","dashboard","drag-and-drop","draggable","frontend","gridstack"],"created_at":"2024-09-30T17:09:20.131Z","updated_at":"2025-04-13T15:58:59.080Z","avatar_url":"https://github.com/ApolloSSC.png","language":"TypeScript","readme":"ng2-gridstack\n=============\n\nA gridstack component for Angular2+. Based on [gridstack.js](https://github.com/troolee/gridstack.js) 0.3.0.\n\nUsage\n=====\n## Requirements\n\n* [gridstack.js](https://github.com/troolee/gridstack.js#usage)\n\n## Install\n\n[![NPM version](https://img.shields.io/npm/v/ng2-gridstack.svg)](https://www.npmjs.com/package/ng2-gridstack)\n\n```bash\n$ npm install ng2-gridstack --save\n```\n## Basic Usage\n\nImport the module...\n\n```ts\nimport { GridStackModule } from 'ng2-gridstack'\n(...)\n\n@NgModule({\n    imports: [\n        (...)\n        GridStackModule,\n    ],\n    declarations: [\n        GridStackComponent,\n        GridStackItemDirective,\n\t\t(...)\n    ],\n    providers: [\n\t\t(...)\n    ]\n})\nexport class YourModule { }\n```\n\nand load gridstack's css. Example using the global css file from AngularCLI\n```css\n/* You can add global styles to this file, and also import other style files */\n@import \"~gridstack/dist/gridstack.min.css\";\n```\n\n[ng2-gridstack](https://github.com/troolee/ng2-gridstack) can be used in two ways, either by letting the component add the items for you, or by building your own items.\n\n#### First mode\n```html\n\u003cgridStack w=\"12\" animate=\"true\" \n\tbuttonClass=\"btn btn-default\" \n\tallowEditing=\"true\" \n\t[options]=\"gridstackOptions\"\n\t[items]=\"panel.Cards\" \n\t(addFunction)=\"addCard()\" \n\t(saveFunction)=\"save($event)\" \n\t(deleteFunction)=\"deletePanel()\" \n\t(deleteCardFunc)=\"deleteCard($event)\"\n\t[addButtonText]=\"'Add card'\"\n\t[saveButtonText]=\"'Save panel'\"\n\t[deleteButtonText]=\"'Delete panel'\"\n\t[deleteCardButtonText]=\"'Delete card'\"\u003e\n\u003c/gridStack\u003e\n```\n#### Second mode\n```html    \n\u003cgridStack w=\"12\" animate=\"true\"\u003e\n\t\u003cdiv gridStackItem\n\t\t[x]=\"0\" [y]=\"0\" [h]=\"3\" [w]=\"3\" [customid]=\"10\"\u003e\n\t\t\u003ch1\u003eHello\u003c/h1\u003e\n\t\u003c/div\u003e\n\u003c/gridStack\u003e\n```\n\n### Inputs/Outputs\n* *w* : number of items that can fit in a row.\n* *animate* : grid animation on/off.\n* *options* (optional) : an associative array of gridstack [options](https://github.com/troolee/gridstack.js/tree/master/doc#options).\n* *allowEditing* : allow the edition of items on double click (false by default).\n* *items* (optional) : an array of objects that have the following properties.\n\t* *x*\n\t* *y*\n\t* *width*\n\t* *height*\n\t* *customid*\n\t* *content* (optional)\n\n* *addButtonText* (optional) : If present, will display a button that triggers addFunction.\n* *saveButtonText* (optional) : If present, will display a button that triggers saveFunction.\n* *deleteButtonText* (optional) : If present, will display a button that triggers deleteFunction.\n* *deleteCardButtonText* (optional) : If present, will display a button that triggers deleteCardFunc.\n\n* *addFunction* (optional) : this function should add a new item to the array passed in the *items* parameter.\n* *saveFunction* (optional) : calls the specified function with the updated array of items as parameter, so that you can save it.\n* *deleteFunction* (optional) : function to call when deleting the whole panel.\n* *deleteCardFunc* (optional) : function to call when a card is deleted (its *customid* is passed as a parameter).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollossc%2Fng2-gridstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapollossc%2Fng2-gridstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollossc%2Fng2-gridstack/lists"}