Package Exports

angular-resize-element

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-resize-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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