ngx-element-resizable v0.0.1

ngx-element-resizable v1.0.0

Angular v6 component

Demo

Installation

npm install --save ngx-element-resizable

Usage

import {ResizeBorderModule} from 'ngx-element-resizable';

div {
    text-align: center;
    width: 200px;
    height: 200px
}
.stream-element {
    background: red;
}
.absolute-element {
    position: absolute;
    top: 300px;
    right: 300px;
    background: blue;
}
.float-element {
    float: right;
    background: aqua;
}

Elements in a normal stream

<div class="stream-element"
     resizeBorder
     [resizeBottom]="true"
     [resizeRight]="true"
     [minHeight]="50"
     [minWidth]="50">
    i am a common stream element
</div>

Floating element

<div class="float-element"
     resizeBorder
     [resizeBottom]="true"
     [resizeLeft]="true"
     [minHeight]="50"
     [minWidth]="50"
     [maxHeight]="300"
     [maxWidth]="300">
    i am a float element
</div>

Positioned element

<div class="absolute-element"
     resizeBorder
     [resizeTop]="true"
     [resizeBottom]="true"
     [resizeLeft]="true"
     [resizeRight]="true"
     [minHeight]="50"
     [minWidth]="50">
    i am a absolute element
</div>

note: To facilitate the operation of the minHeight and minWidth property, try to set it to be larger than 8px