Angular-Resize-Element

An angular 4.0+ directive that allows an element to be resized

Demo

https://michaelkravchuk.github.io/angular-libs

Usage

Step 1: Install angular-resize-element

npm install angular-resize-element --save

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

....
import { AngularResizeElementModule } from 'angular-resize-element';

....

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

Step 3: Add HTML code

<div class="container" #container [style.width.px]="data.width" [style.height.px]="data.height">
    <div class="resize resize__right"
         (resize)="onResize($event)"
         [targetElement]="container"
         [direction]="AngularResizeElementDirection.RIGHT"
    ></div>

    <div class="resize resize__bottom--right"
         (resize)="onResize($event)"
         [targetElement]="container"
         [direction]="AngularResizeElementDirection.BOTTOM_RIGHT"
    ></div>
</div>

Or if you use angular component (and look at TS)

   [targetElement]="containerComponent"

Step 4: Add ts code

  public readonly AngularResizeElementDirection = AngularResizeElementDirection;
  public data: any = {};

  public onResize(evt: AngularResizeElementEvent): void {
        this.data.width = evt.currentWidthValue;
        this.data.height = evt.currentHeightValue;
        this.data.top = evt.currentTopValue;
        this.data.left = evt.currentLeftValue;
  }

and add ViewChild if you use angular component (don`t forget about breaking changes when you use *ngIf with ViewChild)

  @ViewChild('container',  {read: ElementRef})
  public readonly containerElement;

Step 5: Add css to angular.json config

 "styles": [
    ...
    "node_modules/angular-resize-element/bundles/style.scss"
],

Interfaces

enum AngularResizeElementDirection {
    TOP = 'top',
    TOP_RIGHT = 'top-right',
    RIGHT = 'right',
    BOTTOM_RIGHT = 'bottom-right',
    BOTTOM = 'bottom',
    BOTTOM_LEFT = 'bottom-left',
    LEFT = 'left',
    TOP_LEFT = 'top-left'
}

interface AngularResizeElementEvent {
    currentWidthValue: number;
    currentHeightValue: number;
    originalWidthValue: number;
    originalHeightValue: number;
    differenceWidthValue: number;
    differenceHeightValue: number;
    
    currentTopValue: number;
    currentLeftValue: number;
    originalTopValue: number;
    originalLeftValue: number;
    differenceTopValue: number;
    differenceLeftValue: number;

    originalEvent: MouseEvent;
}

API

| Attribute | Type | Description |----------------|--------|------------ | resizeStart | () => AngularResizeElementEvent | This event is fired when resize is started (only one time) | resize | () => AngularResizeElementEvent | This event is fired when mouse move and size is changed | resizeEnd | () => AngularResizeElementEvent | This event is fired when resize is finished (only one time) | targetElement | HTMLElement | Element that will be resize | direction | AngularResizeElementDirection | Direction of resizing | proportionalResize | boolean | Proportional size change (width = height) | applyClass | string | CSS class that will be assigned to the "targetElement" when the "resizeStart "is called and will be removed when "resizeEnd"is called

License

MIT