{"id":15067522,"url":"https://github.com/swiety85/angular2gridster","last_synced_at":"2025-04-13T02:09:10.326Z","repository":{"id":13197742,"uuid":"73859264","full_name":"swiety85/angular2gridster","owner":"swiety85","description":"Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js).","archived":false,"fork":false,"pushed_at":"2024-06-17T23:54:24.000Z","size":11958,"stargazers_count":204,"open_issues_count":101,"forks_count":75,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-13T02:08:29.105Z","etag":null,"topics":["angular","angular2","grid","grid-editor","gridster"],"latest_commit_sha":null,"homepage":"https://swiety85.github.io/angular2gridster/","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/swiety85.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-11-15T22:03:42.000Z","updated_at":"2025-03-21T03:15:41.000Z","dependencies_parsed_at":"2024-06-18T15:20:23.224Z","dependency_job_id":"a1c44200-75a7-4da8-8c5d-26a10ce91abe","html_url":"https://github.com/swiety85/angular2gridster","commit_stats":{"total_commits":376,"total_committers":16,"mean_commits":23.5,"dds":"0.21808510638297873","last_synced_commit":"2f76c7250d4c9b4acc71d4ffdb7bb14b7bc42a8f"},"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiety85%2Fangular2gridster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiety85%2Fangular2gridster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiety85%2Fangular2gridster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiety85%2Fangular2gridster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swiety85","download_url":"https://codeload.github.com/swiety85/angular2gridster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654091,"owners_count":21140236,"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","grid","grid-editor","gridster"],"created_at":"2024-09-25T01:24:35.609Z","updated_at":"2025-04-13T02:09:10.265Z","avatar_url":"https://github.com/swiety85.png","language":"TypeScript","readme":"# angular2gridster (DEPRECIATED)\n\n[![npm version](https://badge.fury.io/js/angular2gridster.svg)](https://badge.fury.io/js/angular2gridster)\n\nAngular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js). [Demo](https://swiety85.github.io/angular2gridster/).\n\n1. [Getting started](https://github.com/swiety85/angular2gridster/wiki/Getting-started)\n2. [What is Angular2gridster and why to use it?](https://github.com/swiety85/angular2gridster/wiki)\n3. [API Documentation](https://github.com/swiety85/angular2gridster/wiki/API-Documentation)\n4. [Roadmap](https://github.com/swiety85/angular2gridster/wiki/Roadmap)\n\nMore comprehensive documentation is available in [Wiki](https://github.com/swiety85/angular2gridster/wiki).\n\nDevelopment progress can be tracked in [Milestones](https://github.com/swiety85/angular2gridster/milestones) and in [Project board](https://github.com/swiety85/angular2gridster/projects/1).\n\n## Versions:\n\n-   Version **13.x** works with **Angular 13.x**.\n-   Version **12.x** works with **Angular 12.x**.\n-   Version **11.x** works with **Angular 11.x**.\n-   Version **10.x** works with **Angular 10.x**.\n-   Version **9.x** works with **Angular 9.x**.\n-   Version **8.x** works with **Angular 8.x**.\n-   Version **7.x** works with **Angular 7.x**.\n-   Version **6.x** works with **Angular 6.x**.\n-   Version **5.x** works with **Angular 5.x**.\n-   Version **4.x** works with **Angular 4.x**.\n\nVersions **1.x** and **0.x** works only with **Angular 4.x**, but the newest states you can find in **v4.x**.\n\n## Installation\n\n```shell\nnpm install angular2gridster\n```\n\nOnce installed you need to import our module:\n\n```js\n...\nimport { GridsterModule } from 'angular2gridster';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    ...\n    GridsterModule.forRoot() // .forRoot() is required since version v4+\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nThe example it imports in AppModule, but it could also be imported in any other module - depends where you want to use it.\n\n### Additional steps for System.js\n\nTo make Angular2gridster works with System.js you need to provide dedicated configuration in `systemjs.config.js`.\nIt requires change in `map` object and 'packages' as follows:\n\n```js\nSystem.config({\n    map: {\n        // ...\n        rxjs: 'node_modules/rxjs',\n        angular2gridster: 'node_modules/angular2gridster',\n    },\n    packages: {\n        // ...\n        rxjs: {defaultExtension: 'js'},\n        angular2gridster: {main: 'dist/index.js', defaultExtension: 'js'},\n    },\n});\n```\n\n## Example usage\n\n```html\n\u003cngx-gridster [options]=\"gridsterOptions\" [draggableOptions]=\"{ handlerClass: 'panel-heading' }\"\u003e\n    \u003cngx-gridster-item\n        *ngFor=\"let widget of widgets\"\n        [(x)]=\"widget.x\"\n        [(y)]=\"widget.y\"\n        [(w)]=\"widget.w\"\n        [(h)]=\"widget.h\"\n    \u003e\n        \u003c!-- some content --\u003e\n    \u003c/ngx-gridster-item\u003e\n\u003c/ngx-gridster\u003e\n```\n\nFor version before 6.0.0:\n\n```html\n\u003cgridster [options]=\"gridsterOptions\" [draggableOptions]=\"{ handlerClass: 'panel-heading' }\"\u003e\n    \u003cgridster-item\n        *ngFor=\"let widget of widgets\"\n        [(x)]=\"widget.x\"\n        [(y)]=\"widget.y\"\n        [(w)]=\"widget.w\"\n        [(h)]=\"widget.h\"\n    \u003e\n        \u003c!-- some content --\u003e\n    \u003c/gridster-item\u003e\n\u003c/gridster\u003e\n```\n\n```js\nwidgets: Array\u003cany\u003e = [...];\ngridsterOptions = {\n  lanes: 2, // how many lines (grid cells) dashboard has\n  direction: 'vertical', // items floating direction: vertical/horizontal/none\n  floating: false, // default=true - prevents items to float according to the direction (gravity)\n  dragAndDrop: false, // possible to change items position by drag n drop\n  resizable: false, // possible to resize items by drag n drop by item edge/corner\n  useCSSTransforms: true, // Uses CSS3 translate() instead of position top/left - significant performance boost.\n  responsiveSizes: true, // allow to set different item sizes for different breakpoints\n  // ResponsiveOptions can overwrite default configuration with any option available for specific breakpoint.\n  responsiveOptions: [\n        {\n            breakpoint: 'sm',\n            lanes: 3\n        },\n        {\n            breakpoint: 'md',\n            minWidth: 768,\n            lanes: 4,\n            dragAndDrop: true,\n            resizable: true\n        },\n        {\n            breakpoint: 'lg',\n            lanes: 6,\n            dragAndDrop: true,\n            resizable: true\n        },\n        {\n            breakpoint: 'xl',\n            minWidth: 1800,\n            lanes: 8,\n            dragAndDrop: true,\n            resizable: true\n        }\n    ]\n};\n```\n\n**Warning**\n\nIf you use `responsiveOptions`, then item coords will be assigned to different breakpoint attributes:\n\n-   till `sm` (480px), it uses `x` and `y` attributes\n-   `sm` (480px - 768px), it uses `xSm` and `ySm` attributes\n-   `md` (768px - 1250px), it uses `xMd` and `yMd` attributes\n-   `lg` (1250px - 1800px), it uses `xLg` and `yLg` attributes\n-   from `xl` (1800px), it uses `xXl` and `yXl` attributes\n\n(widths in px are only example and works for `responsiveOptions in example above).\n\nIf you set `responsiveSizes: true`, item size can be different for different breakpoints. In this case size will be binded to following attributes:\n\n-   till `sm` (480px), it uses `w` and `h` attributes\n-   `sm` (480px - 768px), it uses `wSm` and `hSm` attributes\n-   `md` (768px - 1250px), it uses `wMd` and `hMd` attributes\n-   `lg` (1250px - 1800px), it uses `wLg` and `hLg` attributes\n-   from `xl` (1800px), it uses `wXl` and `hXl` attributes\n\n## Demo\n\nClone or download this repository and just run:\n\n```js\nnpm i\nnpm run build\nnpm start\n```\n\nGo to: http://localhost:4200/\n\n## Compilation problems\n\nIf somebody will have compilation problems please add an issue (if not yet created). I will try to fix it as soon as possible.\nAngular compiler has still some issues opened and it is changing frequently.\n\nAs a temporary solution copy files from `/projects/angular2gridster/src/lib` folder to dedicated folder in your project.\n\n## Issues\n\nIf the current behavior is a bug or you can illustrate your feature request better with an example,\nplease provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox:\n\n[![Edit Angular](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/angular-otned?fontsize=14)\n\nThe project is in development so don't hesitate to writte any questions or suggestion on issue list.\nI look forward to get a response from you.\n\n## Origin\n\nThis project was created on idea of [GridList](https://github.com/hootsuite/grid). Great alternative for Gridster.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiety85%2Fangular2gridster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswiety85%2Fangular2gridster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiety85%2Fangular2gridster/lists"}