An angular 4.0+ directive that allows an element to be resized
npm install angular-resize-elementsh
npm install angular-resize-element --save
`
Step 2: Import angular resize element module into your app module
`ts
....
import { AngularResizeElementModule } from 'angular-resize-element';
....
@NgModule({
...
imports: [
....
AngularResizeElementModule
],
....
})
export class AppModule { }
`
Step 3: Add HTML code
`html
(resize)="onResize($event)"
[targetElement]="container"
[direction]="AngularResizeElementDirection.RIGHT"
>
(resize)="onResize($event)"
[targetElement]="container"
[direction]="AngularResizeElementDirection.BOTTOM_RIGHT"
>
Or if you use angular component (and look at TS)
`html
[targetElement]="containerComponent"
`
Step 4: Add ts code
`ts
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 (dont forget about breaking changes when you use *ngIf with ViewChild)
ts
@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
`ts
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;
}
``