NG7-Angular Drag and expand Div or and popup

NG7-Angular Drag and expand Div or and popup
-----------------------------------------------------------

npm install --save angular-resizable-element

custom.module.ts
---------------
import { ResizableModule } from 'angular-resizable-element';
@NgModule({
  declarations: [
    Component,
    ModalComponent
  ],
  imports: [
    CommonModule,
    ResizableModule]

custom.component.ts
------------------

/* tslint:disable:max-inline-declarations */
import { Component } from '@angular/core';
import { ResizeEvent } from '../src';

@Component({
  selector: 'mwl-demo',
  styles: [
    `
      .rectangle {
        position: relative;
        top: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 150px;
        background-color: #fd4140;
        border: solid 1px #121621;
        color: #121621;
        margin: auto;
      }
      .resize-handle-top,
      .resize-handle-bottom {
        position: absolute;
        height: 5px;
        cursor: row-resize;
        width: 100%;
      }
      .resize-handle-top {
        top: 0;
      }
      .resize-handle-bottom {
        bottom: 0;
      }
      .resize-handle-left,
      .resize-handle-right {
        position: absolute;
        height: 100%;
        cursor: col-resize;
        width: 5px;
      }
      .resize-handle-left {
        left: 0;
      }
      .resize-handle-right {
        right: 0;
      }
    `
  ],
  template: `
    <div class="text-center">
      <h1>Drag and pull the edges of the rectangle</h1>
      <div
        class="rectangle"
        [ngStyle]="style"
        mwlResizable
        [validateResize]="validate"
        [enableGhostResize]="true"
        [resizeSnapGrid]="{ left: 50, right: 50 }"
        (resizeEnd)="onResizeEnd($event)">

        <div class="resize-handle-top" mwlResizeHandle [resizeEdges]="{ top: true }"></div>
        <div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
        <div class="resize-handle-right" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
        <div class="resize-handle-bottom" mwlResizeHandle [resizeEdges]="{ bottom: true }"></div>
      </div>
    </div>
  `
})
export class DemoComponent {
  public style: object = {};

  validate(event: ResizeEvent): boolean {
    const MIN_DIMENSIONS_PX: number = 50;
    if (
      event.rectangle.width &&
      event.rectangle.height &&
      (event.rectangle.width < MIN_DIMENSIONS_PX ||
        event.rectangle.height < MIN_DIMENSIONS_PX)
    ) {
      return false;
    }
    return true;
  }

  onResizeEnd(event: ResizeEvent): void {
    this.style = {
      position: 'fixed',
      left: `${event.rectangle.left}px`,
      top: `${event.rectangle.top}px`,
      width: `${event.rectangle.width}px`,
      height: `${event.rectangle.height}px`
    };
  }
}

Ref:
https://github.com/mattlewis92/angular-resizable-element/blob/master/demo/demo.component.ts
https://mattlewis92.github.io/angular-resizable-element/docs/#development