ngx-resizable-element

angular resizable element

Demo

https://mattlewis92.github.io/angular-resizable-element/

Table of contents

• angular resizable element
  • Demo
  • Table of contents
  • About
  • Installation
  • Documentation
  • Development
    • Prepare your environment
    • Development server
    • Testing
    • Release
  • License

About

An angular 19 directive that allows an element to be dragged and resized

Installation

Install through npm:

npm install ngx-resizable-element

Then use it in your app like so:

import { Component } from '@angular/core';
import { ResizeEvent } from 'ngx-resizable-element';

@Component({
	selector: 'demo-app',
	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);
	}
}

// now use within your apps module
import { NgModule } from '@angular/core';
import { ResizableModule } from 'ngx-resizable-element';

@NgModule({
	declarations: [MyComponent],
	imports: [ResizableModule],
	bootstrap: [MyComponent],
})
class MyModule {}

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/ngx-resizable-element/docs/

Development

Prepare your environment

• Install Node.js (>=16.x.x)
• 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

pnpm release

License

MIT