# angular-draggable-widget

> angular-draggable-widget is a tiny library to add multible draggable widgets to your angular application.

Latest version **1.1.2** (published 2019-05-05) · 0 weekly downloads

## Install

```sh
npm install angular-draggable-widget
pnpm add angular-draggable-widget
yarn add angular-draggable-widget
bun add angular-draggable-widget
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-05-05 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 143.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Sherif Gaballah |
| Maintainers | sgaballah |
| Keywords | Angular, Widget, Drag, Draggable, Angular Drag, Angular Widget, Angular Draggable Widget |

## Links

- npm: https://www.npmjs.com/package/angular-draggable-widget
- Repository: https://github.com/S-Gaballah/angular-draggable-widget
- npm.io page: https://npm.io/package/angular-draggable-widget

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## 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

- 1.1.2 (latest) — 2019-05-05
- 1.1.1 — 2019-05-05
- 1.1.0 — 2019-05-05
- 1.0.0 — 2019-05-02
- 0.0.2 — 2019-05-02
- 0.0.1 — 2019-04-30

## README

# Angular Draggable Widget

angular-draggable-widget is a tiny library to add multible draggable widgets to your angular application.

![alt text](src/assets/sample.gif "Draggable Widget")

## Installation

### node

```console
npm install angular-draggable-widget
```

### yarn

```console
yarn add angular-draggable-widget
```

### SystemJs

>add to `systemjs.config.js`

``` js
'angular-draggable-widget': 'node_modules/angular-draggable-widget/bundles/angular-draggable-widget.umd.min.js',
```

## Usage

>Import `AngularDraggableWidgetModule` in your `AppModule`

``` ts
import { AngularDraggableWidgetModule } from 'angular-draggable-widget';

@NgModule({
  declarations: [AppComponent],
  imports: [
      BrowserModule,
      AngularDraggableWidgetModule
   ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

>and then in `html` template

```html
<draggable-widget
   [isOpened]="true"
   [isDraggable]="true"
   [isMinimizable]="false"
   title="my widget title"
   xPosition="25px"
   yPosition="50px"
   [zIndex]="2"
   iconImageSrc="../assets/logo.png"
   (onClose)="isOpened = false">
    Add your widget content here
  </draggable-widget>
```

## Events, properties, and styling

### Events

| Event            | Description                              |
|:-----------------|------------------------------------------|
| onOpen           | when the widget opened                   |
| onClose          | when the sidget closed                   |
| onMinimize       | when the widget minimized                |
| onDragStart      | when widget drag starts                  |
| onDragEnd        | when widget drag stops                   |
| onDragMoved      | while the widget is dragging             |
| onDragReleased   | when the widget drag has released        |
| onWidgetDClicked | when the minimized widget double clicked |

### Properties

| Property      | Description                        | Default value | type    |
|:--------------|------------------------------------|---------------|---------|
| isOpened      | show/hide widget                   | false         | boolean |
| isDraggable   | Enable/disable drag                | true          | boolean |
| isMinimizable | minimize/maximize widget           | true          | boolean |
| title         | widget title                       | Title         | string  |
| xPosition     | inital top position in px or %     | dynamic       | string  |
| yPosition     | inital left position in px or %    | dynamic       | string  |
| zIndex        | widget order between other widgets | dynamic       | number  |
| iconImageSrc  | widget icon image path             |               | string  |

### Styling

> you can override the css classes to theme your widget.

| css class          | Description                           |
|:-------------------|---------------------------------------|
| widget             | widget active class                   |
| header             | widget header                         |
| title              | widget title                          |
| image              | header icom image                     |
| widgetMinimized    | active when the widget minimized      |
| widgetAsIcon       | thw widget icon when minimized        |
| widgetAsIcon > img | to style the image inside widget icon |

### Small screens

> use media query to override widget styling on small screens

```css
@media only screen and (max-width:600px) {
    .widget {
        bottom: 0px ;
        width: 100% ;
    }
}
```

---
_Source: https://npm.io/package/angular-draggable-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._