🚀 Angular Resizable Directive

Easily make any HTML element resizable in your Angular applications using this lightweight and efficient directive. Perfect for creating dynamic layouts, dashboards, or any component that requires user-controlled resizing.

🎯 Features

✅ Resize elements from any edge (top, bottom, left, right)
✅ Emits events for resize start, resizing, and resize end
✅ Works seamlessly with Angular's rendering system
✅ Supports ghost resizing (visual feedback without actual resizing)
✅ Easily enable/disable resizing dynamically

📦 Installation

npm i ngx-resizeable

🚀 Usage

1⃣ Import the Directive

import { Resizable } from 'ngx-resizeable';

2⃣ Add to Your Component

<div resizable [edges]="{ right: true, bottom: true }" (resizeStart)="onResizeStart($event)" (resizing)="onResizing($event)" (resizeEnd)="onResizeEnd($event)">
  Resizable Content
</div>

3⃣ Handle Resize Events

onResizeStart(event: ResizeEvent) {
  console.log('Resize started:', event);
}

onResizing(event: ResizeEvent) {
  console.log('Resizing:', event);
}

onResizeEnd(event: ResizeEvent) {
  console.log('Resize ended:', event);
}

🎨 Customization

You can customize the directive using the following inputs:

| Input | Type | Description | |---------------|----------|-------------| | edges | Edges | Defines which edges are resizable (e.g., { right: true, bottom: true }). | | ghostResize | boolean | Enables ghost resizing (visual feedback without changing size). | | disableResize | boolean | Disables resizing when set to true. |

🌜 Events

| Event Name | Payload | Description | |---------------|----------|-------------| | resizeStart | ResizeEvent | Fires when resizing starts. | | resizing | ResizeEvent | Fires while resizing is in progress. | | resizeEnd | ResizeEvent | Fires when resizing ends. |

🔢 Version Guide

| Version | Angular Version | |---------|---------------| | v1.x | Angular 17 | | v2.x | Angular 18 | | v3.x | Angular 19 |

Make sure to install the correct version based on your Angular version:

npm install ngx-resizeable@^3.0.0  # For Angular 19
npm install ngx-resizeable@^2.0.0  # For Angular 18
npm install ngx-resizeable@^1.0.0  # For Angular 17

🛠️ Contributing

We welcome contributions! Feel free to submit issues, feature requests, or pull requests.

📝 License

MIT License © 2025 Harsh Kanjiya

🚀 Level up your Angular applications with flexible resizing!