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

angular-resize-element is a Angular Module for resizing your components.

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>

Step 4: Add js code

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

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

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;
    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