Angular resizable and draggable modal component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e upgrade to angular 6 Jun 10, 2018
src parseFloat Sep 5, 2018
.editorconfig first commit Feb 9, 2018
.gitignore upgrade to angular 6.1 Aug 2, 2018
LICENSE upgrade to angular 6.1 Aug 2, 2018
README.md move on top, input css class Jun 30, 2018
angular.json upgrade to angular 6.1 Aug 2, 2018
package.json upgrade to angular 6.1 Aug 2, 2018
tsconfig.json upgrade to angular 6.1 Aug 2, 2018
tslint.json upgrade to angular 6.1 Aug 2, 2018

README.md

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 Description
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