Angular-elements-resizer NPM

AngularElementsResizer

Angular directive that allows element to be resized in all directions. Works without adding borders to the element. This directive is very light and will not trigger change Detection because it works outside of NgZone

Demo

https://aregsargsyan.github.io/DemoForResizerReusableModule/

Usage

Step 1: Install angular-resize-element

npm i angular-elements-resizer

Step 2: Import angular resize element module into your app module

....
import { AngularElementsResizerModule } from 'angular-elements-resizer';

....

@NgModule({
    ...
    imports: [
        ....
        AngularElementsResizerModule
    ],
    ....
})
export class AppModule { }

Step 3: Add ts code to the component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div resizable></div>`,
  styles: ['div { position: absolute; width: 300px;height: 400px; background: red; }']
})
export class AppComponent {
}

Note: The css part here is only for example (for visualization) you can use whatever styles you want

API

Outputs	Type	Description
resizingStart	() => EventInterface	This event is fired when resize is started (only one time)
resizingElement	() => EventInterface	This event is fired when mouse move and size is changed
resizingEnd	() => EventInterface	This event is fired when mouse up and resize is finished (only one time)