angular-resizable-element
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    angular resizable element

    Sponsorship Build Status codecov npm version GitHub license

    Demo

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

    Table of contents

    About

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

    Installation

    Install through npm:

    npm install 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',
      styles: [
        `
          .rectangle {
            position: relative;
            top: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 150px;
            background-color: #fd4140;
            border: solid 1px #121621;
            color: #121621;
            margin: auto;
          }
    
          mwlResizable {
            box-sizing: border-box; // required for the enableGhostResize option to work
          }
    
          .resize-handle-top,
          .resize-handle-bottom {
            position: absolute;
            height: 5px;
            cursor: row-resize;
            width: 100%;
          }
    
          .resize-handle-top {
            top: 0;
          }
    
          .resize-handle-bottom {
            bottom: 0;
          }
    
          .resize-handle-left,
          .resize-handle-right {
            position: absolute;
            height: 100%;
            cursor: col-resize;
            width: 5px;
          }
    
          .resize-handle-left {
            left: 0;
          }
    
          .resize-handle-right {
            right: 0;
          }
        `,
      ],
      template: `
        <div
          class="rectangle"
          mwlResizable
          [enableGhostResize]="true"
          (resizeEnd)="onResizeEnd($event)"
        >
          <div
            class="resize-handle-top"
            mwlResizeHandle
            [resizeEdges]="{ top: true }"
          ></div>
          <div
            class="resize-handle-left"
            mwlResizeHandle
            [resizeEdges]="{ left: true }"
          ></div>
          <div
            class="resize-handle-right"
            mwlResizeHandle
            [resizeEdges]="{ right: true }"
          ></div>
          <div
            class="resize-handle-bottom"
            mwlResizeHandle
            [resizeEdges]="{ bottom: true }"
          ></div>
        </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

    Install

    npm i angular-resizable-element

    DownloadsWeekly Downloads

    101,276

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    385 kB

    Total Files

    41

    Last publish

    Collaborators

    • mattlewis92