An angular 6.0+ directive that allows an element to be dragged and resized
TypeScript
Clone or download

README.md

angular resizable element

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

https://mattlewis92.github.io/angular-resizable-element/demo/

Table of contents

About

An angular 6.0+ directive that allows an element to be dragged and resized

Installation

Install through npm:

npm install --save angular-resizable-element

Then use it in your app like so:

import { Component } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';

@Component({
  selector: 'demo-app',
  // you should add some more styles to the element. See the demo folder for a more fleshed out example
  styles: [
    `
    mwlResizable {
      box-sizing: border-box; // required for the enableGhostResize option to work
    }
  `
  ],
  template: `
    <div
      mwlResizable
      [enableGhostResize]="true"
      [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
      (resizeEnd)="onResizeEnd($event)">
    </div>
  `
})
export class MyComponent {
  onResizeEnd(event: ResizeEvent): void {
    console.log('Element was resized', event);
  }
}

// now use within your apps module
import { NgModule } from '@angular/core';
import { ResizableModule } from 'angular-resizable-element';

@NgModule({
  declarations: [MyComponent],
  imports: [ResizableModule],
  bootstrap: [MyComponent]
})
class MyModule {}

You may also find it useful to view the demo source.

Documentation

All documentation is auto-generated from the source and can be viewed here: https://mattlewis92.github.io/angular-resizable-element/docs/

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

npm run release

License

MIT