-
Notifications
You must be signed in to change notification settings - Fork 3.8k
/
service.ts
97 lines (84 loc) · 2.47 KB
/
service.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* declarations: NzDrawerCustomComponent */
import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
@Component({
selector: 'nz-demo-drawer-service',
template: `
<ng-template #drawerTemplate let-data let-drawerRef="drawerRef">
value: {{ data?.value }}
<br />
<br />
<button nz-button nzType="primary" (click)="drawerRef.close()">close</button>
</ng-template>
<div nz-form>
<nz-form-item>
<input nz-input [(ngModel)]="value" />
</nz-form-item>
</div>
<button nz-button nzType="primary" (click)="openTemplate()">Use Template</button>
<button nz-button nzType="primary" (click)="openComponent()">Use Component</button>
`
})
export class NzDemoDrawerServiceComponent {
@ViewChild('drawerTemplate', { static: false }) drawerTemplate?: TemplateRef<{
$implicit: { value: string };
drawerRef: NzDrawerRef<string>;
}>;
value = 'ng';
constructor(private drawerService: NzDrawerService) {}
openTemplate(): void {
const drawerRef = this.drawerService.create({
nzTitle: 'Template',
nzFooter: 'Footer',
nzExtra: 'Extra',
nzContent: this.drawerTemplate,
nzContentParams: {
value: this.value
}
});
drawerRef.afterOpen.subscribe(() => {
console.log('Drawer(Template) open');
});
drawerRef.afterClose.subscribe(() => {
console.log('Drawer(Template) close');
});
}
openComponent(): void {
const drawerRef = this.drawerService.create<NzDrawerCustomComponent, { value: string }, string>({
nzTitle: 'Component',
nzFooter: 'Footer',
nzExtra: 'Extra',
nzContent: NzDrawerCustomComponent,
nzContentParams: {
value: this.value
}
});
drawerRef.afterOpen.subscribe(() => {
console.log('Drawer(Component) open');
});
drawerRef.afterClose.subscribe(data => {
console.log(data);
if (typeof data === 'string') {
this.value = data;
}
});
}
}
@Component({
selector: 'nz-drawer-custom-component',
template: `
<div>
<input nz-input [(ngModel)]="value" />
<nz-divider></nz-divider>
<button nzType="primary" (click)="close()" nz-button>Confirm</button>
</div>
`
})
export class NzDrawerCustomComponent {
@Input() value = '';
constructor(private drawerRef: NzDrawerRef<string>) {}
close(): void {
this.drawerRef.close(this.value);
}
}