Dialogs are very important in many applications. Sometimes you want to display some messages, get confirmation from users, display a template or a component, interact with dialogs and so on. Narik dialog service provides all of these features and above all, this service is fully independent of any UI library.
Copy export abstract class DialogService {
abstract showDialog < T >(
content : Type < any > | TemplateRef < any > ,
title ?: string ,
data ?: any ,
actions ?: DialogAction [] ,
options ?: DialogOption ,
validateOnClose ?: (
dialogresult : DialogResult < T >
) => boolean | Promise < boolean > ,
onClose ?: (dialogresult : DialogResult < T >) => void ,
providers ?: StaticProvider []
) : DialogRef < T >;
abstract showConfirm (
message : string ,
title ?: string ,
actions ?: DialogAction [] ,
onResult ?: (dialogresult : DialogResult < any >) => void
) : DialogRef < any >;
abstract showMessageBox (message : string , title ?: string ) : DialogRef < any >;
abstract showInput (
message : string ,
title ?: string ,
fields ?: EntityField [] ,
entity ?: any ,
onResult ?: (dialogresult : DialogResult < DialogInputContent >) => void ,
actions ?: DialogAction [] ,
options ?: DialogOption
) : DialogRef < DialogInputContent >;
abstract showTextInput (
message : string ,
title ?: string ,
placeHolder ?: string ,
fieldType ?: FieldTypes ,
defaultValue ?: any ,
onResult ?: (dialogresult : DialogResult < DialogInputContent >) => void ,
actions ?: DialogAction [] ,
options ?: DialogOption
) : DialogRef < any >;
abstract showContent (content : string , title ?: string ) : DialogRef < any >;
abstract error (
message : string | string [] | any ,
title ?: string ,
options ?: any
) : any ;
abstract showMessage (
message : string | string [] ,
title ?: string ,
type ?: MessageType ,
options ?: any
) : any ;
abstract close (
dialog : DialogRef < any > | string ,
dialogResult ?: DialogResult < any > ,
eventSource ?: "DIALOG" | "CONTENT"
);
abstract closeAll (force ?: boolean );
}
Copy export class Test {
@ NarikInject (DialogService)
dialogService : DialogService ;
someMethod (errMessage)
{
this . dialogService .error (errMessage , "" , {
enableHtml : true
});
}
someMethod2 ()
{
this .dialogService
.showConfirm ( "info.delete-confirm" )
. closed .then ((confirmResult : DialogResult < any >) => {
if ( confirmResult .dialogResult === "yes" ) {
...
}
});
}
someMethod3 ()
{
const dialog = this . dialogService .showDialog (
DesignEditorComponent ,
entity .title ,
{
data : content
} ,
[ ... DialogActions .ok_cancel] ,
{
isFullScreen : true
}
);
dialog . events .subscribe ((x : DialogEvent ) => {
if ( x .eventType === "saveRequest" ) {
this .saveContent ( x .eventData);
}
});
dialog . closed .then ((x : DialogResult < DesignEditorComponent >) => {
if ( x .dialogResult === "ok" ) {
this .saveContent ( x . componentInstance .data);
}
});
}
someMethod4 ()
{
this . dialogService .showInput (
"" ,
"selectRole" ,
[
{
name : "role" ,
fieldType : FieldTypes .Radio ,
options : {
placeHolder : "title"
} ,
dataInfo : {
dataKey : "Role" ,
dataProviderKey : "remote"
}
}
] ,
{
role : currentRole
} ,
(x : DialogResult < DialogInputContent >) => {
if ( x .dialogResult === "ok" && x .data && x . data .role) {
this .isBusy = true ;
... .
}
}
);
}
}
Copy export class DialogContent ()
{
constructor (
@ Inject ( DIALOG_REF ) public dialog : DialogRef < any > ) {
}
someMethod (errMessage)
{
this . dialog .close ();
}
someMethod (errMessage)
{
this . dialogRef . events .next ({
eventType : "saveRequest" ,
eventData : this .data
});
}
}