Logo for jsDocs.io

angular-resizable-element

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

Install

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

Overview

An angular 15.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(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<
        ResizableDirective,
        '[mwlResizable]',
        ['mwlResizable'],
        {
            validateResize: 'validateResize';
            enableGhostResize: 'enableGhostResize';
            resizeSnapGrid: 'resizeSnapGrid';
            resizeCursors: 'resizeCursors';
            ghostElementPositioning: 'ghostElementPositioning';
            allowNegativeResizes: 'allowNegativeResizes';
            mouseMoveThrottleMS: 'mouseMoveThrottleMS';
        },
        { resizeStart: 'resizeStart'; resizing: 'resizing'; resizeEnd: 'resizeEnd' },
        never,
        never,
        false,
        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 {}

          property ɵfac

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

            property ɵinj

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

              property ɵmod

              static ɵmod: i0.ɵɵNgModuleDeclaration<
                  ResizableModule,
                  [typeof i1.ResizableDirective, typeof i2.ResizeHandleDirective],
                  never,
                  [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>
                  </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(
                    renderer: Renderer2,
                    element: ElementRef,
                    zone: NgZone,
                    resizableDirective: ResizableDirective
                );

                  property ɵdir

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

                    property ɵfac

                    static ɵfac: i0.ɵɵFactoryDeclaration<
                        ResizeHandleDirective,
                        [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;

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

                                                                        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>