Angular 5 Resizable and draggable Modal

Simple Resizable and draggable modal component. (Demo)

Sample

import {Component} from '@angular/core';

@Component({
  selector: 'app-modal-demo',
  template: `
    <button type="button" class="button" (click)="modalRoot.show()">Open modal</button>
    <app-modal #modalRoot
               [modalTitle]="'Demo modal'"
               [width]="500"
               [zIndex]="1100"
               [autoZIndex]="false"
               (close)="onCloseModal()">
      <ng-container class="app-modal-body">
        <h3>MODAL DIALOG</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
      </ng-container>
      <ng-container class="app-modal-footer">
        <button type="button" class="button button3" (click)="modalRoot.hide()">Delete</button>
        <button type="button" class="button button1" (click)="modalRoot.hide()">Save</button>
        <button type="button" class="button button2" style="float: right;" (click)="modalRoot.hide()">Close</button>
      </ng-container>
    </app-modal>
  `
})
export class ModalDemoComponent {

  onCloseModal() {
  }

}

Properties

Attribute	Type	Default
modalTitle	string	null
width	any	null
zIndex	number	null
minWidth	number	260
minHeight	number	200
scrollTop	boolean	true
maximizable	boolean	false
backdrop	boolean	true
styleClass	string	null

NerdyHippie/ng-modal

Angular 5 Resizable and draggable Modal

Sample

Properties