• Version 4.0.0
  • Published
  • 385 kB
  • 1 dependency
  • MIT license


npm i angular-resizable-element
yarn add angular-resizable-element
pnpm add angular-resizable-element


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



class ResizableDirective

class ResizableDirective implements OnInit, OnDestroy {}
  • Place this on an element to make it resizable. For example:

    [resizeEdges]="{bottom: true, right: true, top: true, left: true}"

    Or in case they are sibling elements:

    <div mwlResizable #resizableElement="mwlResizable"></div>
    <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>


constructor(platformId: any, renderer: any, elm: any, zone: any);

property allowNegativeResizes

allowNegativeResizes: boolean;
  • Allow elements to be resized to negative dimensions

property elm

elm: any;

    property enableGhostResize

    enableGhostResize: boolean;
    • Set to true to enable a temporary resizing effect of the element in between the resizeStart and resizeEnd events.

    property ghostElementPositioning

    ghostElementPositioning: 'fixed' | 'absolute';
    • Define the positioning of the ghost element (can be fixed or absolute)

    property mousedown

    mousedown: any;

    property mousemove

    mousemove: any;

    property mouseMoveThrottleMS

    mouseMoveThrottleMS: number;
    • The mouse move throttle in milliseconds, default: 50 ms

    property mouseup

    mouseup: any;

    property resizeCursors

    resizeCursors: ResizeCursors;
    • The mouse cursors that will be set on the resize edges

    property resizeEnd

    resizeEnd: any;
    • Called after the mouse is released after a resize event. $event is a ResizeEvent object.

    property resizeSnapGrid

    resizeSnapGrid: Edges;
    • A snap grid that resize events will be locked to.

      e.g. to only allow the element to be resized every 10px set it to {left: 10, right: 10}

    property resizeStart

    resizeStart: any;
    • Called when the mouse is pressed and a resize event is about to begin. $event is a ResizeEvent object.

    property resizing

    resizing: any;
    • Called as the mouse is dragged after a resize event has begun. $event is a ResizeEvent object.

    property validateResize

    validateResize: (resizeEvent: ResizeEvent) => boolean;
    • A function that will be called before each resize event. Return true to allow the resize event to propagate or false to cancel it

    method ngOnDestroy

    ngOnDestroy: () => void;

    method ngOnInit

    ngOnInit: () => void;

    class ResizableModule

    class ResizableModule {}

      class ResizeHandleDirective

      class ResizeHandleDirective implements OnInit, OnDestroy {}
      • An element placed inside a mwlResizable directive to be used as a drag and resize handle

        For example

        <div mwlResizable>
        <div mwlResizeHandle [resizeEdges]="{bottom: true, right: true}"></div>

        Or in case they are sibling elements:

        <div mwlResizable #resizableElement="mwlResizable"></div>
        <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>


      renderer: any,
      element: any,
      zone: any,
      resizableDirective: ResizableDirective

        property resizableContainer

        resizableContainer: ResizableDirective;
        • Reference to ResizableDirective in case if handle is not located inside of element with ResizableDirective

        property resizeEdges

        resizeEdges: Edges;
        • The Edges object that contains the edges of the parent element that dragging the handle will trigger a resize on

        method ngOnDestroy

        ngOnDestroy: () => void;

          method ngOnInit

          ngOnInit: () => void;

            method onMousedown

            onMousedown: (
            event: MouseEvent | TouchEvent,
            clientX: number,
            clientY: number
            ) => void;

            method onMouseup

            onMouseup: (clientX: number, clientY: number) => void;


            interface BoundingRectangle

            interface BoundingRectangle {}
            • The bounding rectangle of the resized element

            property bottom

            bottom: number;

              property height

              height?: number;

                property left

                left: number;

                  property right

                  right: number;

                    property scrollLeft

                    scrollLeft?: number;

                      property scrollTop

                      scrollTop?: number;

                        property top

                        top: number;

                          property width

                          width?: number;

                            index signature

                            [key: string]: number | undefined;

                              interface Edges

                              interface Edges {}
                              • The edges that the resize event were triggered on

                              property bottom

                              bottom?: boolean | number;

                                property left

                                left?: boolean | number;

                                  property right

                                  right?: boolean | number;

                                    property top

                                    top?: boolean | number;

                                      index signature

                                      [key: string]: boolean | number | undefined;

                                        interface ResizeEvent

                                        interface ResizeEvent {}
                                        • The $event object that is passed to the resize events

                                        property edges

                                        edges: Edges;

                                          property rectangle

                                          rectangle: BoundingRectangle;

                                            Package Files (7)

                                            Dependencies (1)

                                            Dev Dependencies (0)

                                            No dev dependencies.

                                            Peer Dependencies (1)


                                            To add a badge like this badgeto your package's README, use the codes available below.

                                            You may also use to create a custom badge linking to

                                            • Markdown
                                            • HTML
                                              <a href=""><img src="" alt=""></a>