Logo for jsDocs.io

angular-resizable-element

  • Version 8.0.0
  • Published
  • 132 kB
  • 1 dependency
  • MIT license

Install

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

Overview

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

Index

Classes

Interfaces

Classes

class ResizableDirective

class ResizableDirective implements OnInit, OnDestroy {}

  • Place this on an element to make it resizable. For example:

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

    Or in case they are sibling elements:

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

constructor

constructor();

property allowNegativeResizes

allowNegativeResizes: boolean;

  • Allow elements to be resized to negative dimensions

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

property mousemove

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

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    ResizableDirective,
    '[mwlResizable]',
    ['mwlResizable'],
    {
        validateResize: { alias: 'validateResize'; required: false };
        enableGhostResize: { alias: 'enableGhostResize'; required: false };
        resizeSnapGrid: { alias: 'resizeSnapGrid'; required: false };
        resizeCursors: { alias: 'resizeCursors'; required: false };
        ghostElementPositioning: {
            alias: 'ghostElementPositioning';
            required: false;
        };
        allowNegativeResizes: { alias: 'allowNegativeResizes'; required: false };
        mouseMoveThrottleMS: { alias: 'mouseMoveThrottleMS'; required: false };
    },
    { resizeStart: 'resizeStart'; resizing: 'resizing'; resizeEnd: 'resizeEnd' },
    never,
    never,
    true,
    never
>;

    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 {}

      • Deprecated

        import standalone ResizableDirective / ResizeHandleDirective directives instead

      property ɵfac

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

        property ɵinj

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

          property ɵmod

          static ɵmod: i0.ɵɵNgModuleDeclaration<
              ResizableModule,
              never,
              [typeof ResizableDirective, typeof ResizeHandleDirective],
              [typeof ResizableDirective, typeof 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>
              </div>

              Or in case they are sibling elements:

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

            property ɵdir

            static ɵdir: i0.ɵɵDirectiveDeclaration<
                ResizeHandleDirective,
                '[mwlResizeHandle]',
                never,
                {
                    resizeEdges: { alias: 'resizeEdges'; required: false };
                    resizableContainer: { alias: 'resizableContainer'; required: false };
                },
                {},
                never,
                never,
                true,
                never
            >;

              property ɵfac

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

                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;

                    Interfaces

                    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 (1)

                                                                  Dependencies (1)

                                                                  Dev Dependencies (0)

                                                                  No dev dependencies.

                                                                  Peer Dependencies (1)

                                                                  Badge

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

                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/angular-resizable-element.

                                                                  • Markdown
                                                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular-resizable-element)
                                                                  • HTML
                                                                    <a href="https://www.jsdocs.io/package/angular-resizable-element"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>