Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including angular-resizable-element with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. var angularResizableElement = require("angular-resizable-element")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-resizable-element v3.2.2

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

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



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free