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
Name | Description | Value |
---|---|---|
MRFREE | Modal Result to describe free | -1 |
MRCUSTOM | Modal Result to describe a custom result | 0 |
MROK | Modal Result to describe OK action, used on buttons. | 1 |
MRCANCEL | Modal Result to describe when modal is canceled. | 2 |
MRABORT | Modal Result to describe abort operation. | 3 |
MRRETRY | Modal Result to describe retry operation. | 4 |
MRIGNORE | Modal Result to describe ignore operation. | 5 |
MRYES | Modal Result to describe Yes, used to confirm operations. | 6 |
MRNO | Modal Result to describe No, used to deny operations | 7 |
MRCLOSE | odal Result to describe when modal is canceled | 8 |
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
backdrop | boolean | false | Background overlay of modal | true | false |
closable | boolean | true | Control if window dialog is closable or not | true | false |
color | string | basic | Changes the default color of the button. | basic | primary | success | information | warning | danger | light | dark |
draggable | boolean | true | Control if window dialog is draggrable or not | true | false |
fullscreen | boolean | false | Opens the modal in fullscreen mode | true | false |
height | string | 500px | Height of window dialog | px | % | em |
icon | string | null | Icon of Window | ion-printer | fa fa-home | any |
maximizable | boolean | true | Control if window dialog is maximizable or not | true | false |
minimizable | boolean | true | Control if window dialog is minimizable or not | true | false |
restoreMaximize | boolean | true | Handle if can be restorable or not | true | false |
title | string | My Modal | Title of window dialog | any text |
width | string | 500px | Width of window dialog | px | % | em |
Events
Name | Description |
---|---|
close | Callback to invoke when modal Close. |
maximize | Callback to invoke when modal Maximize. |
minimize | Callback to invoke when modal Minimize. |
show | Callback to invoke when modal Opens. |