angular-elements-resizer

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

Further help

In case of questions feel free to contact me https://linkedin.com/in/areg-sargsyan

License

MIT