https://github.com/mattlewis92/angular-resizable-element
An angular 20.0+ directive that allows an element to be dragged and resized
https://github.com/mattlewis92/angular-resizable-element
angular
Last synced: 5 months ago
JSON representation
An angular 20.0+ directive that allows an element to be dragged and resized
- Host: GitHub
- URL: https://github.com/mattlewis92/angular-resizable-element
- Owner: mattlewis92
- License: mit
- Created: 2016-05-24T16:07:10.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2025-08-23T18:06:15.000Z (7 months ago)
- Last Synced: 2025-08-23T23:37:35.474Z (7 months ago)
- Topics: angular
- Language: TypeScript
- Homepage: https://mattlewis92.github.io/angular-resizable-element/
- Size: 24.3 MB
- Stars: 320
- Watchers: 10
- Forks: 102
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# angular resizable element
[](https://github.com/users/mattlewis92/sponsorship)
[](https://github.com/mattlewis92/angular-resizable-element/actions/workflows/ci.yml)
[](https://codecov.io/gh/mattlewis92/angular-resizable-element)
[](http://badge.fury.io/js/angular-resizable-element)
[](https://raw.githubusercontent.com/mattlewis92/angular-resizable-element/main/LICENSE)
## Demo
https://mattlewis92.github.io/angular-resizable-element/
## Table of contents
- [About](#about)
- [Installation](#installation)
- [Documentation](#documentation)
- [Development](#development)
- [License](#license)
## About
An angular 20.0+ directive that allows an element to be dragged and resized
## Installation
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](https://github.com/mattlewis92/angular-resizable-element/blob/main/projects/demo/app/demo.component.ts).
## Documentation
All documentation is auto-generated from the source and can be viewed here:
https://mattlewis92.github.io/angular-resizable-element/docs/
## Development
### Prepare your environment
- Install [Node.js (>=24.5.0)](http://nodejs.org/)
- Install pnpm: `corepack enable`
- Install local dev dependencies: `pnpm install` while current directory is this repo
### Development server
Run `pnpm start` to start a development server on port 8000 with auto reload + tests.
### Testing
Run `pnpm test` to run tests once or `pnpm test:watch` to continually run tests.
### Release
```bash
pnpm release
```
## License
MIT