/
modal.ts
63 lines (58 loc) · 1.73 KB
/
modal.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*
* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
*/
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from '@siemens/ix-angular/dist';
@Component({
selector: 'app-modal',
template: `
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
</div>
<ix-button (click)="test()">Show Modal</ix-button>
<ng-template #customModal let-modal>
<div>
<div class="modal-header">
Message headline
<ix-icon-button
ghost
icon="close"
class="dismiss-modal"
(click)="modal.dismiss('dismiss')"
></ix-icon-button>
</div>
<div class="modal-body">Message text lorem ipsum</div>
<div class="modal-footer">
<ix-button
outline
class="dismiss-modal"
(click)="modal.dismiss('dismiss')"
>
Cancel
</ix-button>
<ix-button class="close-modal" (click)="modal.close('okay')"
>OK</ix-button
>
</div>
</div>
</ng-template>
`,
})
export class Modal {
@ViewChild('customModal', { read: TemplateRef })
customModalRef!: TemplateRef<any>;
constructor(private readonly modalService: ModalService) {}
async test() {
const instance = await this.modalService.open({
content: this.customModalRef,
title: '',
});
instance.onClose.on((a) => {
console.log(a);
});
}
}