https://mattlewis92.github.io/angular-resizable-element/
An angular 20.0+ directive that allows an element to be dragged and resized
Install through npm:
Example :npm install angular-resizable-element
Then use it in your app like so:
Example :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: `
<div class="rectangle" mwlResizable [enableGhostResize]="true" (resizeEnd)="onResizeEnd($event)">
<div class="resize-handle-top" mwlResizeHandle [resizeEdges]="{ top: true }"></div>
<div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
<div class="resize-handle-right" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
<div class="resize-handle-bottom" mwlResizeHandle [resizeEdges]="{ bottom: true }"></div>
</div>
`,
})
export class MyComponent {
onResizeEnd(event: ResizeEvent): void {
console.log('Element was resized', event);
}
}
You may also find it useful to view the demo source.
All documentation is auto-generated from the source and can be viewed here: https://mattlewis92.github.io/angular-resizable-element/docs/
corepack enable
pnpm install
while current directory is this repoRun pnpm start
to start a development server on port 8000 with auto reload + tests.
Run pnpm test
to run tests once or pnpm test:watch
to continually run tests.
pnpm release
MIT