-
Notifications
You must be signed in to change notification settings - Fork 60
/
modal.ts
70 lines (64 loc) · 1.9 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
64
65
66
67
68
69
70
/*
* SPDX-FileCopyrightText: 2022 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from '@siemens/ix-angular';
@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
data-button-close
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);
});
}
}