This has been adapted from the @11mb/angular-resizable, itself an Angular2 version of @reklino/angular-resizable for AngularJS. Similar work in JavaScript: @RickStrahl/jquery-resizable; Split.js by @nathancahill.

Checkout and fork these examples (see also explanations below):

StackBlitz - Default Horizontal Layout (HTML-like table rows)

StackBlitz - Vertical/Columns Layout !

Install ngx-bootstrap from npm:

npm install @3dgenomes/ngx-resizable --save

Add needed package to NgModule imports:

import { NgxResizableModule } from '@3dgenomes/ngx-resizable';

@NgModule({
  ...
  imports: [NgxResizableModule,...]
  ...
})

Use component <rsz-layout> to your HTML:

        +--------+--------+
        |        >        |    [Directions]
  Row 1 | Cell 1 > Cell 2 |    Rows: dragbar on bottom 'v'
        |        >        |    Cells: dragbar on right '>'
        + v v v v v v v v + 
        |        >        |
  Row 2 | Cell 3 > Cell 4 |
        |        >        |
        +--------+--------+

<div class="content">
  <rsz-layout class="row" [directions]="['bottom']" [rFlex]="true">
    <rsz-layout class="cell" [directions]="['right']" [rFlex]="true">
      <p>Cell Content 1</p>
    </rsz-layout>
    <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
      <p>Cell Content 2</p>
    </rsz-layout>
  </rsz-layout>
  <rsz-layout class="row" [directions]="['none']" [rFlex]="false">
    <rsz-layout class="cell" [directions]="['right']" [rFlex]="true">
      <p>Cell Content 3</p>
    </rsz-layout>
    <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
      <p>Cell Content 4</p>
    </rsz-layout>
  </rsz-layout>
</div>

    Col 1     Col 2
  +--------+--------+
  |        >        |    [Directions]
  | Cell 1 > Cell 3 |    Rows: dragbar on right '>'
  |        >        |    Cells: dragbar on bottom 'v'
  | v v v  >  v v v |
  |        >        |
  | Cell 2 > Cell 4 |
  |        >        |
  +--------+--------+
        Drag bar

  <div class="content cols">
    <rsz-layout class="row" [directions]="['right']" [rFlex]="true">
      <rsz-layout class="cell" [directions]="['bottom']" [rFlex]="true">
        <p>Cell Content 1</p>
      </rsz-layout>
      <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
        <p>Cell Content 2</p>
      </rsz-layout>
    </rsz-layout>
    <rsz-layout class="row" [directions]="['none']" [rFlex]="false">
      <rsz-layout class="cell" [directions]="['bottom']" [rFlex]="true">
        <p>Cell Content 3</p>
      </rsz-layout>
      <rsz-layout class="cell" [directions]="['none']" [rFlex]="false">
        <p>Cell Content 4</p>
      </rsz-layout>
    </rsz-layout>
  </div>

This event is emitted at the beginning of a resize with the following info object:

• info.width : The width of the directive at time of resize start. Will be false if resizing vertically
• info.height : The height of the directive at time of resize start. Will be false if resizing horizontally
• info.id : The id of the directive. Will be false if there is no id set.
• info.evt : original mouse event object

Called repeatedly while the mouse is being moved. By default, only calls once every 100ms to keep CPU usage low.

• info.width : The width of the directive at time of resize end. Will be false if resizing vertically
• info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
• info.id : The id of the directive. Will be false if there is no id set.
• info.evt : original mouse event object

This event is emitted at the end of a resize with the following object as an argument:

• info.width : The width of the directive at time of resize end. Will be false if resizing vertically
• info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
• info.id : The id of the directive. Will be false if there is no id set.
• info.evt : original mouse event object

• Update to Angular 8

• Correct NPM upload

• Update packaging

• Update deps to fix TAR security

• Fix aot compile issue since window does not exist

• Add README.md
• Export component via public-api.ts

• Update version display

MIT

This project was generated with Angular CLI.

Run ng s for a dev server. Navigate to http://localhost:4200/. The demo app will automatically reload if you change any of the source files.

Run npm run package to build the project. The build artifacts and NPM tarball will be stored in the dist/ directory. The demo app will be stored in the docs/ directory and automatically published to https://3dgenomes.github.io/ngx-resizable/ when pushed to GitHub.

After building and commit/push/merge to Github:

1. update the version notes in the root README.md
2. update the version number in the library: projects/ngx-resizable/package.json
3. login to npm: npm login (check if already loggedin using npm whoami)
4. publish on npm: npm publish ./dist/ngx-resizable/3dgenomes-ngx-resizable-1.8.1.tgz --access public.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.