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

angular resizable element

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


Table of contents


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


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';

  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: `
      [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
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';

  declarations: [MyComponent],
  imports: [ResizableModule],
  bootstrap: [MyComponent]
class MyModule {}

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


All documentation is auto-generated from the source and can be viewed here:


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.


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


npm run release