• Version 7.0.2
  • Published
  • 338 kB
  • 1 dependency
  • MIT license


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


An angular 15.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: Renderer2, elm: ElementRef, zone: NgZone);

property allowNegativeResizes

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

property elm

elm: ElementRef;

    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: Subject<{
    clientX: number;
    clientY: number;
    edges?: Edges | undefined;

    property mousemove

    mousemove: Subject<{
    clientX: number;
    clientY: number;
    edges?: Edges | undefined;
    event: MouseEvent | TouchEvent;

    property mouseMoveThrottleMS

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

    property mouseup

    mouseup: Subject<{
    clientX: number;
    clientY: number;
    edges?: Edges | undefined;

    property ɵdir

    static ɵdir: i0.ɵɵDirectiveDeclaration<
    validateResize: 'validateResize';
    enableGhostResize: 'enableGhostResize';
    resizeSnapGrid: 'resizeSnapGrid';
    resizeCursors: 'resizeCursors';
    ghostElementPositioning: 'ghostElementPositioning';
    allowNegativeResizes: 'allowNegativeResizes';
    mouseMoveThrottleMS: 'mouseMoveThrottleMS';
    { resizeStart: 'resizeStart'; resizing: 'resizing'; resizeEnd: 'resizeEnd' },

      property ɵfac

      static ɵfac: i0.ɵɵFactoryDeclaration<ResizableDirective, never>;

        property resizeCursors

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

        property resizeEnd

        resizeEnd: EventEmitter<ResizeEvent>;
        • 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: EventEmitter<ResizeEvent>;
        • Called when the mouse is pressed and a resize event is about to begin. $event is a ResizeEvent object.

        property resizing

        resizing: EventEmitter<ResizeEvent>;
        • 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 {}

          property ɵfac

          static ɵfac: i0.ɵɵFactoryDeclaration<ResizableModule, never>;

            property ɵinj

            static ɵinj: i0.ɵɵInjectorDeclaration<ResizableModule>;

              property ɵmod

              static ɵmod: i0.ɵɵNgModuleDeclaration<
              [typeof i1.ResizableDirective, typeof i2.ResizeHandleDirective],
              [typeof i1.ResizableDirective, typeof i2.ResizeHandleDirective]

                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: Renderer2,
                element: ElementRef,
                zone: NgZone,
                resizableDirective: ResizableDirective

                  property ɵdir

                  static ɵdir: i0.ɵɵDirectiveDeclaration<
                  { resizeEdges: 'resizeEdges'; resizableContainer: 'resizableContainer' },

                    property ɵfac

                    static ɵfac: i0.ɵɵFactoryDeclaration<
                    [null, null, null, { optional: true }]

                      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 ResizeCursors

                                                      interface ResizeCursors {}

                                                        property bottomLeft

                                                        bottomLeft: string;

                                                          property bottomRight

                                                          bottomRight: string;

                                                            property leftOrRight

                                                            leftOrRight: string;

                                                              property topLeft

                                                              topLeft: string;

                                                                property topOrBottom

                                                                topOrBottom: string;

                                                                  property topRight

                                                                  topRight: string;

                                                                    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>