{"id":16183223,"url":"https://github.com/envyn/ngx-widget-grid","last_synced_at":"2025-03-16T10:31:49.038Z","repository":{"id":17843486,"uuid":"82807432","full_name":"envyN/ngx-widget-grid","owner":"envyN","description":"Angular 2.x or in general ng-x module for dashboards","archived":false,"fork":false,"pushed_at":"2023-05-31T20:11:05.000Z","size":8524,"stargazers_count":65,"open_issues_count":20,"forks_count":14,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-23T21:36:57.726Z","etag":null,"topics":["angular","angular2","angular4","dashboard","framework","grid","widget"],"latest_commit_sha":null,"homepage":"https://envyn.github.io/ngx-widget-grid","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/envyN.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2017-02-22T13:27:54.000Z","updated_at":"2024-06-19T00:04:00.552Z","dependencies_parsed_at":"2024-06-22T22:01:21.709Z","dependency_job_id":null,"html_url":"https://github.com/envyN/ngx-widget-grid","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-widget-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-widget-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-widget-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/envyN%2Fngx-widget-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/envyN","download_url":"https://codeload.github.com/envyN/ngx-widget-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814898,"owners_count":20352037,"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","dashboard","framework","grid","widget"],"created_at":"2024-10-10T06:45:17.471Z","updated_at":"2025-03-16T10:31:48.628Z","avatar_url":"https://github.com/envyN.png","language":"TypeScript","readme":"# ngx-widget-grid\n[![codebeat badge](https://codebeat.co/badges/8693fc3e-1013-4d82-a121-9a854c1da50b)](https://codebeat.co/projects/github-com-envyn-ngx-widget-grid-master)\n\nA flexible grid layout for responsive dashboards.\n\nThis library got its inspiration from [*angular-widget-grid*](http://patbuergin.github.io/angular-widget-grid/) and has been written as a pure Angular 2.x [+] module.\n#### Demo: https://envyn.github.io/ngx-widget-grid\n\n## Installation\nInstall with [npm](http://www.npmjs.com/):\n\n```sh\n$ npm install ngx-widget-grid\n```\nor with [yarn](https://yarnpkg.com/)\n```sh\n$ yarn add ngx-widget-grid\n```\n\nAdd the ngx-widget-grid module as a dependency to your application module:\n\n```\nimport { NgxWidgetGridModule } from 'ngx-widget-grid';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    NgxWidgetGridModule,\n    ...\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n#### Minimal Example\n```html\n\u003cngx-widget-grid [rows]=\"4\" [columns]=\"5\" [highlightNextPosition]=\"false\"\n                 [showGrid]=\"true\" (widgetPositionChange)=\"onWidgetChange($event)\"\u003e\n  \u003cngx-widget [(position)]=\"{top: 2,left: 2,height: 1,width: 1}\"\n              [movable]=\"true\" [resizable]=\"true\"\u003e\n    \u003cdiv style=\"height:100%;width:100%; display:flex;\"\u003e\n      \u003cdiv style=\"height:100%;width:100%; padding:10px; background-color: rgb(140, 198, 0);\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/ngx-widget\u003e\n\u003c/ngx-widget-grid\u003e\n```\n![Minimal Example](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-1.png)\n\n\n### Adding Traits\n#### Widgets\n##### `position`\n```html\n\u003cngx-widget [(position)]=\"widget.position\"\u003e\u003c/ngx-widget\u003e\n```\nYou can bind the position of the widget to data received from server so that even if the widget is moved, the new positions are always updated in the widget configuration.\n\n##### `movable`\n```html\n\u003cngx-widget [movable]=\"true\" [(position)]=\"widget.position\"\u003e\u003c/ngx-widget\u003e\n```\nIf `movable` is true, users will be able to move the respective widget.\n\n![Moving Widgets](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-2.png)\n\n##### `resizable`\n```html\n\u003cngx-widget [resizable]=\"true\" [(position)]=\"widget.position\"\u003e\u003c/ngx-widget\u003e\n```\nIf `resizable` is true, users will be able to resize the respective widget.\n\n![Resizing Widgets](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-3.png)\n\nOptionally, you can limit the resize directions:\n```html\n\u003cngx-widget [resizeDirections]=\"['NW', 'NE', 'E', 'SW']\" [(position)]=\"widget.position\"\u003e\u003c/ngx-widget\u003e\n```\n\n![Restricted Resizing](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-4.png)\n\n##### `swapOnMove`\n````html\n\u003cngx-widget [swapOnMove]=\"true\" [(position)]=\"widget.position\"\u003e\u003c/ngx-widget\u003e\n````\nIf `swapOnMove` is `true`, dragged widget will swap position and size with the widget over which the current one is dropped.\nDefault is `false` which means, widget will be placed in the nearest available area.\n#### Grid: Options\n##### `showGrid` (default: `false`)\n```html\n\u003cngx-grid columns=\"20\" rows=\"15\" [showGrid]=\"true\"\u003e\n```\nToggles the gridlines.\n\n![Gridlines Enabled](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-5.png)\n\n##### `highlightNextPosition` (default: `false`)\n```html\n\u003cngx-grid columns=\"20\" rows=\"15\" [highlightNextPosition]=\"true\"\u003e\n```\nHighlights the largest free area in the grid, if any. This area will be automatically assigned to the next widget with a falsy or conflicting position.\n\n![Highlight Next Position (1/2)](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-6.png)\n![Highlight Next Position (2/2)](https://raw.githubusercontent.com/patbuergin/angular-widget-grid/master/doc/wg-7.png)\n\n\n### Events\n##### `gridFull`\nThe grid emits `gridFull`event as `true` (when grid has been fully occupied) or `false` when there is still some space left in the grid, so that you can e.g. enable/disable UI elements accordingly.\n```html\n\u003cngx-grid columns=\"20\" rows=\"15\" (gridFull)=\"onGridFull($event)\"\u003e\n```\n```javascript\nfunction onGridFull(isGridFull) {\n    if(isGridFull){\n        //...\n        //make add widget button disabled\n        //...\n    }else{\n        //...\n        //make add widget button enabled\n        //...\n    }\n}\n```\n##### `widgetPositionChange`\nEmitted whenever the position of a widget is changed. The event comes with an attached object argument, which contains the affected widget's `index` and its `newPosition`.\n\n```html\n\u003cngx-grid columns=\"20\" rows=\"15\" (widgetPositionChange)=\"onWidgetChange($event)\"\u003e\n```\n\n### Functions\n#### getNextPosition\n`getNextPosition` is a function you could call to get details about the next available position that is being highlighted as part of `highlightNextPosition`.\n\n\n## Build (for developers/contributors)\n* Install [yarn](https://yarnpkg.com/lang/en/docs/install/)\n* Install dependencies\n  ```nodejs\n  yarn install\n  ```\n* Build library\n  ```nodejs\n  yarn build-lib\n  ```\n* Run\n  ```nodejs\n  yarn start\n  ```\n* Build\n  ```nodejs\n  yarn build\n  ```\n* Link\n  ```nodejs\n  cd dist \u0026\u0026 yarn link\n  ```\n* Publish (from repo root directory)\n  ```nodejs\n  yarn publish:lib --new-version \u003cversion\u003e\n  ```\n## License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvyn%2Fngx-widget-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenvyn%2Fngx-widget-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvyn%2Fngx-widget-grid/lists"}