NgxResizeDirective

An Angular directive to make any HTML element resizeable by dragging on its sides or corners. Fully compatible with CDK Drag and Drop, making it easy to create a resizable and dragabble component.

Designed to be a drop-in solution for resizable components, yet customizable.

Install

npm install ngx-resize-directive

In your global styles.scss add:

@import url("node_modules/ngx-resize-directive/styles/ngx-resize-directive.style.scss");

Import the NgxResizeDirectiveModule module.

Usage

<div resizable>Resizable</div>

Combine with CDK Drag and Drop

<div
  resizable
  cdkDrag
  #resize="resizeDir"
  [cdkDragFreeDragPosition]="{ x: resize.newPosX, y: resize.newPosY }"
> </div>

Watch out! The lines

  #resize="resizeDir"
  [cdkDragFreeDragPosition]="{ x: resize.newPosX, y: resize.newPosY }"

are mandatory to notify the cdkDrag directive about any repositioning done by top-to-bottom or left-to-right resizing.

Properties

| Property          | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                    | | ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | resizeHandleTag        | ALL_HANDLES   | A list of the resize handles to create. Valid elements are: 'top','bottom','right','left','cornerSe','cornerNw','cornerSw','cornerNe'                                                                                                                                                                                                          | | resizeApplyChanges      | true          | The directive applies the resize to the host element by changing the height and width style properties, and applies reposition by changing the transform style property. In case an other approach is necessary, this property can be set to false and the changes can be implemented by the user, reacting to the resize and reposition events emitted by the directive. | | resizeApplyReposition   | true          | The application of reposition on top-to-bottom or left-to-right resize can be disabled separatley.                                                                                                                                                                                                                                                                             | | resizeRootElement | undefined     | This is analogous to the cdkDrag cdkDragRootElement Selector that will be used to determine the root draggable element, starting from the resizable element and going up the DOM. Passing an alternate root element is useful when trying to enable resize on an element that you might not have access to.                                                          | | resizeBoundry     | undefined     | This is analogous to the cdkDrag cdkDragBoundary Selector that will be used to determine the element to which the resizable position and size will be constrained. It'll be matched starting from the element's parent and going up the DOM until a match has been found.                                                                                              | | resizeDisable     | false         | Disable all resize                                                                                                                                                                                                                                                                                                                                                             | | resizeDisableTags       | []            | List of tags of handles to disable. Valid values are the same as for resizeHandleTag                                                                                                                                                                                                                                                                                              |

Events

| Event                | Type                                     | Description                                                                                                    | | -------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | resizeWidth          | {diff: number;    newWidth: number;  } | On horizontal resize, emits the amount of resize and the new width                                             | | resizeHeight         | {diff: number;    newWidth: number;  } | On vertical resize, emits the amount of resize and the new width                                               | | repositionHorizontal | {diff: number;    newPosX: number;  }  | On left-to-right resize, emits the amount of reposition (same as the amount of resize) and the new X transform | | repositionVertical   | {diff: number;    newPosY: number;  }  | On top-to-bottom resize, emits the amount of reposition (same as the amount of resize) and the new Y transform | | resizeStart          | MouseEvent                               | Emits the mouse down event that starts a resize                                                                | | resizeEnd            | MouseEvent                               | Emits the mouse up event that ends a resize                                                                    |

Public fields

| Field   | Description | | -------- | ----------- | | newPosX | Contains the X transformation after the last resize event. This field is public for easier integration with CDK Drag (see Combine with CDK Drag and Drop) | | newPosY | Contains the Y transformation after the last resize event. This field is public for easier integration with CDK Drag (see Compbine with CDK Drag and Drop) |

Styling

| Style class   | Component | | -------- | ----------- | |.resizable-container| Is added to all containers with the resizable directive | |.resize-handle| All side and corner resize handles | |.resize-handle-top| Top resize handle | |.resize-handle-bottom| Bottom resize handle | |.resize-handle-right| Right resize handle | |.resize-handle-left| Left resize handle | |.resize-handle-corner-ne| Top-right corner resize handle | |.resize-handle-corner-nw| Top-left corner resize handle | |.resize-handle-corner-se| Bottom-right corner resize handle | |.resize-handle-corner-sw| Bottom-left corner resize handle |