angular-elements-resizer
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

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

GitHub stars

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)

Further help

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

License

MIT

Package Sidebar

Install

npm i angular-elements-resizer

Weekly Downloads

16

Version

2.1.2

License

MIT

Unpacked Size

161 kB

Total Files

17

Last publish

Collaborators

  • areg_sargsyan