angular-draggable-widget v1.1.2

Angular Draggable Widget

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

Installation

node

npm install angular-draggable-widget

yarn

yarn add angular-draggable-widget

SystemJs

add to systemjs.config.js

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

Usage

Import AngularDraggableWidgetModule in your AppModule

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

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

and then in html template

<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

Properties

Styling

you can override the css classes to theme your widget.

Small screens

use media query to override widget styling on small screens

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