ngx-resizeable v3.1.0

🚀 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:

🌜 Events

🔢 Version Guide

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!