NARIK
Search…
08.-Dialog-Service
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.

Using Dialog Service

For using Narik Dialog Service you should inject DialogService. DialogService has many methods that you can use them.
1
export abstract class DialogService {
2
abstract showDialog<T>(
3
content: Type<any> | TemplateRef<any>,
4
title?: string,
5
data?: any,
6
actions?: DialogAction[],
7
options?: DialogOption,
8
validateOnClose?: (
9
dialogresult: DialogResult<T>
10
) => boolean | Promise<boolean>,
11
onClose?: (dialogresult: DialogResult<T>) => void,
12
providers?: StaticProvider[]
13
): DialogRef<T>;
14
abstract showConfirm(
15
message: string,
16
title?: string,
17
actions?: DialogAction[],
18
onResult?: (dialogresult: DialogResult<any>) => void
19
): DialogRef<any>;
20
abstract showMessageBox(message: string, title?: string): DialogRef<any>;
21
abstract showInput(
22
message: string,
23
title?: string,
24
fields?: EntityField[],
25
entity?: any,
26
onResult?: (dialogresult: DialogResult<DialogInputContent>) => void,
27
actions?: DialogAction[],
28
options?: DialogOption
29
): DialogRef<DialogInputContent>;
30
abstract showTextInput(
31
message: string,
32
title?: string,
33
placeHolder?: string,
34
fieldType?: FieldTypes,
35
defaultValue?: any,
36
onResult?: (dialogresult: DialogResult<DialogInputContent>) => void,
37
actions?: DialogAction[],
38
options?: DialogOption
39
): DialogRef<any>;
40
abstract showContent(content: string, title?: string): DialogRef<any>;
41
abstract error(
42
message: string | string[] | any,
43
title?: string,
44
options?: any
45
): any;
46
abstract showMessage(
47
message: string | string[],
48
title?: string,
49
type?: MessageType,
50
options?: any
51
): any;
52
abstract close(
53
dialog: DialogRef<any> | string,
54
dialogResult?: DialogResult<any>,
55
eventSource?: "DIALOG" | "CONTENT"
56
);
57
abstract closeAll(force?: boolean);
58
}
Copied!
Example:
1
export class Test{
2
@NarikInject(DialogService)
3
dialogService: DialogService;
4
5
someMethod(errMessage)
6
{
7
this.dialogService.error(errMessage, "", {
8
enableHtml: true
9
});
10
}
11
12
someMethod2()
13
{
14
this.dialogService
15
.showConfirm("info.delete-confirm")
16
.closed.then((confirmResult: DialogResult<any>) => {
17
if (confirmResult.dialogResult === "yes") {
18
...
19
}
20
});
21
}
22
23
someMethod3()
24
{
25
const dialog = this.dialogService.showDialog(
26
DesignEditorComponent,
27
entity.title,
28
{
29
data: content
30
},
31
[...DialogActions.ok_cancel],
32
{
33
isFullScreen: true
34
}
35
);
36
dialog.events.subscribe((x: DialogEvent) => {
37
if (x.eventType === "saveRequest") {
38
this.saveContent(x.eventData);
39
}
40
});
41
dialog.closed.then((x: DialogResult<DesignEditorComponent>) => {
42
if (x.dialogResult === "ok") {
43
this.saveContent(x.componentInstance.data);
44
}
45
});
46
}
47
48
someMethod4()
49
{
50
this.dialogService.showInput(
51
"",
52
"selectRole",
53
[
54
{
55
name: "role",
56
fieldType: FieldTypes.Radio,
57
options: {
58
placeHolder: "title"
59
},
60
dataInfo: {
61
dataKey: "Role",
62
dataProviderKey: "remote"
63
}
64
}
65
],
66
{
67
role: currentRole
68
},
69
(x: DialogResult<DialogInputContent>) => {
70
if (x.dialogResult === "ok" && x.data && x.data.role) {
71
this.isBusy = true;
72
....
73
}
74
}
75
);
76
}
77
}
Copied!
If a component opened with DialogService, you can inject DIALOG_REF inside that and with help of it, create some dialog actions.
Example
1
export class DialogContent()
2
{
3
constructor(
4
@Inject(DIALOG_REF) public dialog: DialogRef<any> ) {
5
}
6
7
someMethod(errMessage)
8
{
9
this.dialog.close();
10
}
11
12
someMethod(errMessage)
13
{
14
this.dialogRef.events.next({
15
eventType: "saveRequest",
16
eventData: this.data
17
});
18
}
19
}
Copied!
Last modified 7mo ago
Copy link