# angular-material-widget-engine > Widget engine built using angular and angular-material Latest version **2.4.0** (published 2017-01-17) · ISC license · 0 weekly downloads ## Install ```sh npm install angular-material-widget-engine pnpm add angular-material-widget-engine yarn add angular-material-widget-engine bun add angular-material-widget-engine ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.4.0 | | Published | 2017-01-17 | | First published | 2016-10-10 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Known vulnerabilities | 0 (+10 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 19 | | Author | Rajesh Vaya | | Maintainers | rajeshvaya | | Keywords | angular, angular-material, widget, widget-engine, dashboard, drag-and-drop | ## Links - npm: https://www.npmjs.com/package/angular-material-widget-engine - Repository: https://github.com/rajeshvaya/angular-material-widget-engine - Homepage: https://github.com/rajeshvaya/angular-material-widget-engine#readme - Issues: https://github.com/rajeshvaya/angular-material-widget-engine/issues - npm.io page: https://npm.io/package/angular-material-widget-engine ## Dependencies (5) - [angular](https://npm.io/package/angular.md) ^1.5.8 - [angular-aria](https://npm.io/package/angular-aria.md) ^1.5.8 - [angular-animate](https://npm.io/package/angular-animate.md) ^1.5.8 - [angular-material](https://npm.io/package/angular-material.md) ^1.1.1 - [angular-material-icons](https://npm.io/package/angular-material-icons.md) ^0.7.1 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 2.4.0 (latest) — 2017-01-17 - 2.3.8 — 2017-01-04 - 2.3.7 — 2016-12-10 - 2.3.6 — 2016-11-03 - 2.3.5 — 2016-10-30 - 2.3.4 — 2016-10-30 - 2.3.3 — 2016-10-24 - 2.3.2 — 2016-10-20 - 2.3.1 — 2016-10-20 - 2.3.0 — 2016-10-19 - 2.2.3 — 2016-10-18 - 2.2.2 — 2016-10-18 - 2.2.1 — 2016-10-13 - 2.2.0 — 2016-10-13 - 2.1.4 — 2016-10-12 - … 7 more at https://npm.io/package/angular-material-widget-engine/versions ## README # Widget Engine ## Introduction A widget engine to create beautiful and interactive dashboards, reports, widgets containing HTML content, videos, canvas, what have you to display almost anything in the form of widgets, which can be dragged and dropped, maxmized. Customizable look and feel for each widget. ## Features - Configurable number of columns - Configurable default widgets - Resize columns - Dynamic adding and removing of columns - Sticky widgets - Fullscreen widget - Dynamic adding and removing of widgets - Drag and drop widgets - Add custom widget controls - Events on custom widget controls - Everything configured through single JSON ([sample](https://github.com/rajeshvaya/angular-material-widget-engine/raw/master/example/data/engine.json)) - Callbacks for any change in the widget engine ## Demo ([Simple](https://rajeshvaya.github.io/angular-material-widget-engine/demo/multiple_columns), [Dashboard](https://rajeshvaya.github.io/angular-material-widget-engine/demo/simple_dashboard)) ![Demo GIF](https://github.com/rajeshvaya/angular-material-widget-engine/raw/master/demo.gif) ## Dependencies - Angular - Angular Material - Material Icons Fonts ## Usage ```bash npm install angular-material-widget-engine ``` ```HTML

``` ```Javascript angular.module('MyApp', ['ngMaterial', 'ngMdWidgetEngine']); angular.module('MyApp').controller('sampleCtrl', sampleCtrl); // get your widget configuration from your API function sampleCtrl($scope, $http){ $http.get("/example/data/engine.json").success(function(data){ $scope.data = {}; $scope.data.WEconfiguration = data; $scope.data.WEcallback = function(e, configuration){ console.log(e, configuration); }; }); } ``` ## Engine Configuration Key | Value | Description --------- | ------- | ------- | dynamicColumns | boolean | Enable / disable the feature of allowing user to add more remove empty columns (default is true) resizeableColumns | boolean | Enable / disable the feature of allowing user to adjust the width of each column ## Column Configuration Key | Value | Description --------- | ------- | ------- | name | column-1 | Any descriptive name for the column background | #FFFFFF | Any hex color code as the background color of the column size | 50 | A numeric value less than 100 for the width of the column with respective to with widget engine width (min. is 15) widgets | [...] | List of widgets in the column (with the below Widget Configurations) ## Widget Configuration Key | Value | Description --------- | ------- | ------- | name | widget-1 | Any descriptive name for the widget title | Report One | Title displayed in the toolbar for each widget type | `include` or `iframe` or `html` | The content of widget can be fetched through `ng-include` or any external content through iFrame or simple HTML content string through HTML resize | true | It allows the content to be resized vertically by the user minHeight | 300 | Minimum height of the widget during resizing maxHeight | 500 | Maximum height of the widget possible during resizing sticky | true | Set it to true if widget should not be replaced or moved by another widget sitckyControl | true | Set it to true to allow the lock icon to show up on tool bar so user can toggle the sticky feature (default is false) fullscreenControl | true | Show the button control for fullscreen toggle or not in the widget toolbar (default is true) closeControl | true | Show the button control for removing widget or not in the widget toolbar (default is true) controlsLayout | `default` or `menu` or `fab` | View the widget controls in different layouts in the toolbar customActions | ```[{"name": "android", "icon": "android", "event": "show_me_android", "tooltip": "A custom action"}]``` | Add any number of custom controls to the widget toolbar and widget engine will fire an event through the callback function specified in `WECallback` ## Theming Widget engine follows the guidelines set by the `$mdThemingProvider` --- _Source: https://npm.io/package/angular-material-widget-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._