Dialog Module Name: DialogModule
Module Name: DialogModule
Dialog is an overlay component service that can be used as message, confirmation, alert and to show an error exception.
Showcase
Show Dialog Info
Show Dialog Confirmation
Show Dialog Alert
Show Dialog Error
Making it Work
Step One
Inject the DialogService
in your constructor
.
constructor( public dialogService: DialogService ) {}
Final Step
Create an function to call the dialog type method of the DialogService. For example:
showDialogConfirmation() {
this.dialogService.confirmation( 'Are you sure ?', ({
isYes: (yes) => console.log('yes', yes),
isNo: (no) => console.log('no', no)
}));
}
The others methods types are the same template
showDialogInfo() {
this.dialogService.info( 'This is an Info Dialog' ).then( value => {
console.log( 'Return', value );
} );
Dialog Results
export enum ModalResult {
MRFREE = -1,
MRCUSTOM = 0,
MROK = 1,
MRCANCEL = 2,
MRABORT = 3,
MRRETRY = 4,
MRIGNORE = 5,
MRYES = 6,
MRNO = 7,
MRCLOSE = 8,
}
Methods
Name | Parameters | Description |
---|---|---|
alert | message: string : The message itself options: AlertOptions : Options of type AlertOptions mdOptions: ModalOptions : Options of modal container Promisse : returns a promisse with dialog result | Show a alert dialog message. |
confirmation | message : The message itself callback : Callback of type ConfirmCallback, returned after closed. options: ConfirmationOptions : Options of type ConfirmationOptions mdOptions: ModalOptions : Options of modal container | Show a confirmation dialog with two buttons. |
error | message: string : The message itself options: ErrorOptions : Options of type ErrorOptions mdOptions: ModalOptions : Options of modal container Promisse : returns a promisse with dialog result | Show a error dialog message. |
info | message: string : The message itself options: InfoOptions : Options of type InfoOptions mdOptions: ModalOptions : Options of modal container Promisse : returns a promisse with dialog result | Show a information dialog message. |
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
color | string | #53C68C | Color of window dialog header | Hex | RGBA |
draggable | boolean | true | Control if window dialog is draggrable or not | 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 |
title | string | My Modal | Title of window dialog | any text |
width | string | 500px | Width of window dialog | px | % | em |
Events