An angular 20.0+ directive that allows an element to be dragged and resized
npm install angular-resizable-element
https://mattlewis92.github.io/angular-resizable-element/
- About
- Installation
- Documentation
- Development
- License
An angular 20.0+ directive that allows an element to be dragged and resized
Install through npm:
``
npm install angular-resizable-element
Then use it in your app like so:
`typescript
import { Component } from '@angular/core';
import { ResizeEvent, ResizableDirective, ResizeHandleDirective } from 'angular-resizable-element';
@Component({
selector: 'demo-app',
imports: [ResizableDirective, ResizeHandleDirective],
styles: [
.rectangle {
position: relative;
top: 200px;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 150px;
background-color: #fd4140;
border: solid 1px #121621;
color: #121621;
margin: auto;
}
mwlResizable {
box-sizing: border-box; // required for the enableGhostResize option to work
}
.resize-handle-top,
.resize-handle-bottom {
position: absolute;
height: 5px;
cursor: row-resize;
width: 100%;
}
.resize-handle-top {
top: 0;
}
.resize-handle-bottom {
bottom: 0;
}
.resize-handle-left,
.resize-handle-right {
position: absolute;
height: 100%;
cursor: col-resize;
width: 5px;
}
.resize-handle-left {
left: 0;
}
.resize-handle-right {
right: 0;
}
,
],
template:
,
})
export class MyComponent {
onResizeEnd(event: ResizeEvent): void {
console.log('Element was resized', event);
}
}
`You may also find it useful to view the demo source.
Documentation
All documentation is auto-generated from the source and can be viewed here:
https://mattlewis92.github.io/angular-resizable-element/docs/
Development
$3
- Install Node.js (>=24.5.0)
- Install pnpm:
- Install local dev dependencies: while current directory is this repo$3
Run
pnpm start to start a development server on port 8000 with auto reload + tests.$3
Run
pnpm test to run tests once or pnpm test:watch to continually run tests.$3
`bash
pnpm release
``MIT