Modal Module Name: ModalModule

Module Name: ModalModule

Below is a fixed modal example (meaning its position is related with the window). Included are the modal header and the body wrapper, the modal content is a component that you inject inside of modal component, passing on the service at the creation moment.

Showcase
Modal Features
Modal Container

The Modal Container is used to group all modals that are minimized.


Drag And Drop

Allows user drag and drop the modal through it area.


Fixed by Parent

The fixed parent set the Modal Area to it parent and the drag going be only in that area.


Controls (Minimize, Maximize and Close)

The controls allows the user to organize their windows, combining with the Container Modal, is very usable.


Modal Result

According with the button and the mdResult the modal will dispatch the events to the origin component.

Making it Work

Step One

Declare the ModalService and set the tlContainerModal Directive on a HTML Element root, where modal going to be on it. For Example:
<div class="content-wrapper" tlContainerModal>
  <!-- Main content -->
  <section class="content">
    <router-outlet></router-outlet>
  </section>
  <!-- /.content -->
</div>

Step Two

Inside of your constructor, you have to declare ComponentFactoryResolver and ModalService.
constructor(public compiler: ComponentFactoryResolver, public modalService: ModalService) {}

Step Tree

Import your custom component that will be inside the modal as entry component the property ( entryComponents ) in your module. In this case is NewModal
@NgModule({
    declarations: [
      ModalDemo,
      NewModal,
    ],
    imports:[
      CommonModule,
      FormsModule,
      ModalModule.forRoot(),
    ],
    exports: [
      ModalDemo,
      NewModal
    ],
    providers: [
      DialogService
    ],
  })
  export class ModalDemoModule {}

Final Step

Create an function to call the function createModal passing the following parameters. For example:
this.modalService.createModal(NewModalComponent, this.compiler, null, (modalResult) => {
  this.modalResult = modalResult;
}).on('show', () => {
  console.log('Show Modal');
});
Modal Results
NameDescriptionValue
MRFREEModal Result to describe free-1
MRCUSTOMModal Result to describe a custom result0
MROKModal Result to describe OK action, used on buttons.1
MRCANCELModal Result to describe when modal is canceled.2
MRABORTModal Result to describe abort operation.3
MRRETRYModal Result to describe retry operation.4
MRIGNOREModal Result to describe ignore operation.5
MRYESModal Result to describe Yes, used to confirm operations.6
MRNOModal Result to describe No, used to deny operations7
MRCLOSEodal Result to describe when modal is canceled8
Properties
NameTypeDefaultDescriptionOptions
backdropbooleanfalseBackground overlay of modal true | false
closablebooleantrueControl if window dialog is closable or not true | false
colorstringbasicChanges the default color of the button. basic | primary | success | information | warning | danger | light | dark
draggablebooleantrueControl if window dialog is draggrable or not true | false
fullscreenbooleanfalseOpens the modal in fullscreen mode true | false
heightstring500pxHeight of window dialog px | % | em
iconstringnullIcon of Window ion-printer | fa fa-home | any
maximizablebooleantrueControl if window dialog is maximizable or not true | false
minimizablebooleantrueControl if window dialog is minimizable or not true | false
restoreMaximizebooleantrueHandle if can be restorable or not true | false
titlestringMy ModalTitle of window dialog any text
widthstring500pxWidth of window dialog px | % | em
Events
NameDescription
closeCallback to invoke when modal Close.
maximizeCallback to invoke when modal Maximize.
minimizeCallback to invoke when modal Minimize.
showCallback to invoke when modal Opens.