Ngx-resize-directive NPM

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