Angular resizable and draggable modal

Simple resizable and draggable modal component. (Demo)

npm i ngx-modal-window --save

Sample

1import { NgxModalWindowModule } from 'ngx-modal-window';
2
3@NgModule({
4  imports: [
5    NgxModalWindowModule
6  ]
7})

1<button type="button" class="button" (click)="modalRoot.show()">Open modal</button>
2<ngx-modal-window #modalRoot class="modal-demo">
3  <ng-container class="app-modal-header">Demo modal</ng-container>
4  <ng-container class="app-modal-body">
5    <h3>MODAL DIALOG</h3>
6    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
7      Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
8  </ng-container>
9  <ng-container class="app-modal-footer">
10    <button type="button" class="button button3" (click)="modalRoot.hide()">Delete</button>
11    <button type="button" class="button button1" (click)="modalRoot.hide()">Save</button>
12    <button type="button" class="button button2" style="float: right;" (click)="modalRoot.hide()">Close
13    </button>
14  </ng-container>
15</ngx-modal-window>

1.modal-demo .ui-modal {
2  width: 37.5rem;
3  /* for resize limits use min-width, min-height, max-width, max-height in css */
4}
5.modal-demo .ui-modal-overlay, .modal-demo .ui-modal {
6  z-index: 10;
7}
8/* colors */
9:root {
10  --dt-color-primary: #5b9bd5;
11}
12/* for IE */
13.ui-modal-header {
14  background-color: #5b9bd5;
15}

Properties

Attribute	Type	Default	Description
scrollTopEnable	boolean	true
maximizable	boolean	false
backdrop	boolean	true

Events

1@Output() openModal = new EventEmitter();
2@Output() closeModal = new EventEmitter<boolean>();
3@Output() resizeModal = new EventEmitter<ResizableEvent>();
4@Output() maximizeModal = new EventEmitter<boolean>();