0
# Feedback Components
1

2
Components for providing user feedback and system status including modals, messages, notifications, and progress indicators.
3

4
## Capabilities
5

6
### Modal Service & Component
7

8
Modal dialog system for displaying content in an overlay layer with backdrop.
9

10
```typescript { .api }
11
/**
12
 * Modal service for programmatic modal creation
13
 */
14
interface NzModalService {
15
  /** Create a modal dialog */
16
  create<T>(config: NzModalOptions<T>): NzModalRef<T>;
17
  /** Create a confirmation modal */
18
  confirm(options: NzModalConfirmOptions): NzModalRef;
19
  /** Create an info modal */
20
  info(options: NzModalOptions): NzModalRef;
21
  /** Create a success modal */
22
  success(options: NzModalOptions): NzModalRef;
23
  /** Create an error modal */
24
  error(options: NzModalOptions): NzModalRef;
25
  /** Create a warning modal */
26
  warning(options: NzModalOptions): NzModalRef;
27
  /** Close all modals */
28
  closeAll(): void;
29
  /** Observable that emits when all modals are closed */
30
  readonly afterAllClose: Observable<void>;
31
  /** Get currently open modals */
32
  get openModals(): NzModalRef[];
33
}
34

35
/**
36
 * Modal component
37
 * Selector: nz-modal
38
 */
39
interface NzModalComponent<T = any> {
40
  /** Modal visible state */
41
  nzVisible: boolean;
42
  /** Modal closable */
43
  nzClosable: boolean;
44
  /** OK loading state */
45
  nzOkLoading: boolean;
46
  /** OK disabled state */
47
  nzOkDisabled: boolean;
48
  /** Cancel disabled state */
49
  nzCancelDisabled: boolean;
50
  /** Cancel loading state */
51
  nzCancelLoading: boolean;
52
  /** Keyboard support */
53
  nzKeyboard: boolean;
54
  /** Mask */
55
  nzMask: boolean;
56
  /** Mask closable */
57
  nzMaskClosable: boolean;
58
  /** OK text */
59
  nzOkText: string | null;
60
  /** OK type */
61
  nzOkType: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default' | 'danger';
62
  /** OK danger */
63
  nzOkDanger: boolean;
64
  /** Cancel text */
65
  nzCancelText: string | null;
66
  /** Modal title */
67
  nzTitle: string | TemplateRef<{}> | null;
68
  /** Modal content */
69
  nzContent: string | TemplateRef<{}> | Type<T> | null;
70
  /** Component params */
71
  nzComponentParams: Partial<T>;
72
  /** Modal footer */
73
  nzFooter: string | TemplateRef<{}> | Array<ModalButtonOptions<T>> | null;
74
  /** Get container */
75
  nzGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
76
  /** Z index */
77
  nzZIndex: number;
78
  /** Modal width */
79
  nzWidth: number | string;
80
  /** Wrap class name */
81
  nzWrapClassName: string;
82
  /** Modal class name */
83
  nzClassName: string;
84
  /** Modal style */
85
  nzStyle: object;
86
  /** Mask style */
87
  nzMaskStyle: object;
88
  /** Body style */
89
  nzBodyStyle: object;
90
  /** Icon type */
91
  nzIconType: string;
92
  /** Auto focus */
93
  nzAutofocus: 'ok' | 'cancel' | 'auto' | null;
94
  /** Centered */
95
  nzCentered: boolean;
96
  /** Draggable */
97
  nzDraggable: boolean;
98
  /** After open */
99
  nzAfterOpen: EventEmitter<void>;
100
  /** After close */
101
  nzAfterClose: EventEmitter<any>;
102
  /** OK click event */
103
  nzOnOk: EventEmitter<T> | OnClickCallback<T> | null;
104
  /** Cancel click event */
105
  nzOnCancel: EventEmitter<T> | OnClickCallback<T> | null;
106
  /** Visible change event */
107
  nzVisibleChange: EventEmitter<boolean>;
108
}
109

110
/**
111
 * Modal reference for programmatically created modals
112
 */
113
interface NzModalRef<T = any, R = any> {
114
  /** After open observable */
115
  afterOpen: Observable<void>;
116
  /** After close observable */
117
  afterClose: Observable<R>;
118
  /** Close modal */
119
  close(result?: R): void;
120
  /** Destroy modal */
121
  destroy(result?: R): void;
122
  /** Get content component instance */
123
  getContentComponent(): T;
124
  /** Trigger OK */
125
  triggerOk(): void;
126
  /** Trigger Cancel */
127
  triggerCancel(): void;
128
  /** Get component instance */
129
  componentInstance: T | null;
130
}
131

132
// Types
133
interface NzModalOptions<T = any, D = any> extends NzModalOptionsForService<T> {
134
  nzOnOk?: OnClickCallback<T>;
135
  nzOnCancel?: OnClickCallback<T>;
136
}
137

138
interface NzModalConfirmOptions<T = any> extends NzModalOptions<T> {
139
  nzIconType?: string;
140
}
141

142
type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
143

144
interface ModalButtonOptions<T = any> {
145
  label: string;
146
  type?: string;
147
  shape?: string;
148
  ghost?: boolean;
149
  size?: string;
150
  autoLoading?: boolean;
151
  show?: boolean | ((this: ModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
152
  loading?: boolean | ((this: ModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
153
  disabled?: boolean | ((this: ModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
154
  onClick?(this: ModalButtonOptions<T>, contentComponentInstance?: T): any;
155
}
156

157
// Module
158
class NzModalModule {
159
  static forRoot(): ModuleWithProviders<NzModalModule>;
160
}
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
import { NzModalService, NzModalModule } from 'ng-zorro-antd/modal';
167

168
@Component({
169
  template: `
170
    <!-- Template modal -->
171
    <nz-modal [(nzVisible)]="isVisible" nzTitle="Basic Modal" (nzOnOk)="handleOk()" (nzOnCancel)="handleCancel()">
172
      <ng-container *nzModalContent>
173
        <p>Some contents...</p>
174
        <p>Some contents...</p>
175
        <p>Some contents...</p>
176
      </ng-container>
177
    </nz-modal>
178
    
179
    <button nz-button nzType="primary" (click)="showModal()">Open Modal</button>
180
    <button nz-button nzType="primary" (click)="showConfirm()">Show Confirm</button>
181
  `
182
})
183
export class ModalExampleComponent {
184
  isVisible = false;
185

186
  constructor(private modal: NzModalService) {}
187

188
  showModal(): void {
189
    this.isVisible = true;
190
  }
191

192
  showConfirm(): void {
193
    this.modal.confirm({
194
      nzTitle: 'Do you Want to delete these items?',
195
      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
196
      nzOnOk: () => console.log('OK')
197
    });
198
  }
199

200
  handleOk(): void {
201
    this.isVisible = false;
202
  }
203

204
  handleCancel(): void {
205
    this.isVisible = false;
206
  }
207
}
208
```
209

210
### Message Service
211

212
Global message display service for showing feedback messages.
213

214
```typescript { .api }
215
/**
216
 * Message service for global message display
217
 */
218
interface NzMessageService {
219
  /** Show success message */
220
  success(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
221
  /** Show error message */
222
  error(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
223
  /** Show info message */
224
  info(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
225
  /** Show warning message */
226
  warning(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
227
  /** Show loading message */
228
  loading(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
229
  /** Create a new message */
230
  create(type: 'success' | 'info' | 'warning' | 'error' | 'loading' | string, content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled;
231
  /** Remove a message */
232
  remove(messageId?: string): void;
233
  /** Remove all messages */
234
  removeAll(): void;
235
}
236

237
/**
238
 * Message component (internal)
239
 * Selector: nz-message
240
 */
241
interface NzMessageComponent {
242
  /** Message data */
243
  nzMessage: NzMessageData;
244
  /** Message index */
245
  nzIndex: number;
246
}
247

248
// Types
249
interface NzMessageDataOptions {
250
  nzDuration?: number;
251
  nzAnimate?: boolean;
252
  nzPauseOnHover?: boolean;
253
}
254

255
interface NzMessageData {
256
  content?: string | TemplateRef<void>;
257
  html?: string;
258
  type?: 'success' | 'info' | 'warning' | 'error' | 'loading' | string;
259
  duration?: number;
260
  messageId?: string;
261
  options?: NzMessageDataOptions;
262
  state?: 'enter' | 'leave';
263
  createdAt?: Date;
264
}
265

266
interface NzMessageDataFilled extends Required<NzMessageData> {
267
  onClose?: Subject<boolean>;
268
}
269

270
// Module
271
class NzMessageModule {
272
  static forRoot(): ModuleWithProviders<NzMessageModule>;
273
}
274
```
275

276
### Notification Service
277

278
Notification service for complex message display with actions.
279

280
```typescript { .api }
281
/**
282
 * Notification service for complex notifications
283
 */
284
interface NzNotificationService {
285
  /** Show success notification */
286
  success(title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
287
  /** Show error notification */
288
  error(title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
289
  /** Show info notification */
290
  info(title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
291
  /** Show warning notification */
292
  warning(title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
293
  /** Show blank notification */
294
  blank(title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
295
  /** Create notification */
296
  create(type: 'success' | 'info' | 'warning' | 'error' | 'blank' | string, title: string, content: string | TemplateRef<void>, options?: NzNotificationDataOptions): NzNotificationDataFilled;
297
  /** Remove notification */
298
  remove(notificationId?: string): void;
299
  /** Remove all notifications */
300
  removeAll(): void;
301
}
302

303
/**
304
 * Notification component (internal)
305
 * Selector: nz-notification
306
 */
307
interface NzNotificationComponent {
308
  /** Notification data */
309
  nzNotification: NzNotificationData;
310
  /** Notification index */
311
  nzIndex: number;
312
}
313

314
// Types
315
interface NzNotificationDataOptions {
316
  nzKey?: string;
317
  nzStyle?: NgStyleInterface;
318
  nzClass?: NgClassInterface;
319
  nzCloseIcon?: TemplateRef<void> | string;
320
  nzHtml?: string;
321
  nzData?: any;
322
  nzDuration?: number;
323
  nzAnimate?: boolean;
324
  nzPauseOnHover?: boolean;
325
  nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
326
}
327

328
interface NzNotificationData {
329
  title?: string | TemplateRef<void>;
330
  content?: string | TemplateRef<void>;
331
  html?: string;
332
  type?: 'success' | 'info' | 'warning' | 'error' | 'blank' | string;
333
  key?: string;
334
  messageId?: string;
335
  options?: NzNotificationDataOptions;
336
  state?: 'enter' | 'leave';
337
  createdAt?: Date;
338
}
339

340
interface NzNotificationDataFilled extends Required<NzNotificationData> {
341
  onClose?: Subject<boolean>;
342
}
343

344
// Module
345
class NzNotificationModule {
346
  static forRoot(): ModuleWithProviders<NzNotificationModule>;
347
}
348
```
349

350
### Alert Component
351

352
Alert component for displaying important information and messages.
353

354
```typescript { .api }
355
/**
356
 * Alert component
357
 * Selector: nz-alert
358
 */
359
interface NzAlertComponent {
360
  /** Alert type */
361
  nzType: 'success' | 'info' | 'warning' | 'error';
362
  /** Closable alert */
363
  nzCloseable: boolean;
364
  /** Show icon */
365
  nzShowIcon: boolean;
366
  /** Alert banner */
367
  nzBanner: boolean;
368
  /** Alert message */
369
  nzMessage: string | TemplateRef<void>;
370
  /** Alert description */
371
  nzDescription: string | TemplateRef<void>;
372
  /** Close text */
373
  nzCloseText: string | TemplateRef<void>;
374
  /** Icon type */
375
  nzIconType: NgClassInterface | string | null;
376
  /** Action */
377
  nzAction: string | TemplateRef<void>;
378
  /** Close event */
379
  nzOnClose: EventEmitter<boolean>;
380
}
381

382
// Module
383
class NzAlertModule {
384
  static forRoot(): ModuleWithProviders<NzAlertModule>;
385
}
386
```
387

388
### Progress Component
389

390
Progress component for showing the completion progress of tasks.
391

392
```typescript { .api }
393
/**
394
 * Progress component
395
 * Selector: nz-progress
396
 */
397
interface NzProgressComponent {
398
  /** Progress type */
399
  nzType: 'line' | 'circle' | 'dashboard';
400
  /** Progress percent */
401
  nzPercent: number;
402
  /** Progress status */
403
  nzStatus: 'success' | 'exception' | 'active' | 'normal';
404
  /** Show progress info */
405
  nzShowInfo: boolean;
406
  /** Stroke width */
407
  nzStrokeWidth: number;
408
  /** Stroke line cap */
409
  nzStrokeLinecap: 'round' | 'square';
410
  /** Stroke color */
411
  nzStrokeColor: string | string[] | { from: string; to: string; direction: string };
412
  /** Trail color */
413
  nzTrailColor: string;
414
  /** Canvas width */
415
  nzWidth: number;
416
  /** Gap degree for dashboard */
417
  nzGapDegree: number;
418
  /** Gap position for dashboard */
419
  nzGapPosition: 'top' | 'bottom' | 'left' | 'right';
420
  /** Circle size */
421
  nzSize: 'default' | 'small';
422
  /** Steps count */
423
  nzSteps: number;
424
  /** Success percent */
425
  nzSuccessPercent: number;
426
  /** Format function */
427
  nzFormat: (percent: number) => string;
428
}
429

430
// Module
431
class NzProgressModule {
432
  static forRoot(): ModuleWithProviders<NzProgressModule>;
433
}
434
```
435

436
### Drawer Service & Component
437

438
Drawer component for panel-like content that slides in from screen edge.
439

440
```typescript { .api }
441
/**
442
 * Drawer service for programmatic drawer creation
443
 */
444
interface NzDrawerService {
445
  /** Create a drawer */
446
  create<T = any, D = any, R = any>(options: NzDrawerOptions<T, D>): NzDrawerRef<T, R>;
447
}
448

449
/**
450
 * Drawer component
451
 * Selector: nz-drawer
452
 */
453
interface NzDrawerComponent<T = any, R = any> {
454
  /** Drawer content */
455
  nzContent: TemplateRef<{ $implicit: any; drawerRef: NzDrawerRef<R> }> | Type<T>;
456
  /** Drawer closable */
457
  nzClosable: boolean;
458
  /** Mask closable */
459
  nzMaskClosable: boolean;
460
  /** Show mask */
461
  nzMask: boolean;
462
  /** Keyboard support */
463
  nzKeyboard: boolean;
464
  /** Drawer title */
465
  nzTitle: string | TemplateRef<{}>;
466
  /** Drawer placement */
467
  nzPlacement: 'top' | 'right' | 'bottom' | 'left';
468
  /** Mask style */
469
  nzMaskStyle: NgStyleInterface;
470
  /** Body style */
471
  nzBodyStyle: NgStyleInterface;
472
  /** Wrap class name */
473
  nzWrapClassName: string;
474
  /** Drawer width */
475
  nzWidth: number | string;
476
  /** Drawer height */
477
  nzHeight: number | string;
478
  /** Z index */
479
  nzZIndex: number;
480
  /** Offset X */
481
  nzOffsetX: number;
482
  /** Offset Y */
483
  nzOffsetY: number;
484
  /** Drawer visible */
485
  nzVisible: boolean;
486
  /** Close icon */
487
  nzCloseIcon: string | TemplateRef<void> | null;
488
  /** Extra content */
489
  nzExtra: string | TemplateRef<void>;
490
  /** Footer content */
491
  nzFooter: string | TemplateRef<void>;
492
  /** Close event */
493
  nzOnClose: EventEmitter<MouseEvent>;
494
  /** Visible change event */
495
  nzOnViewInit: EventEmitter<void>;
496
}
497

498
/**
499
 * Drawer reference for programmatically created drawers
500
 */
501
interface NzDrawerRef<T = any, R = any> {
502
  /** After open observable */
503
  afterOpen: Observable<void>;
504
  /** After close observable */
505
  afterClose: Observable<R>;
506
  /** Close drawer */
507
  close(result?: R): void;
508
  /** Open drawer */
509
  open(): void;
510
  /** Get content component instance */
511
  getContentComponent(): T | null;
512
}
513

514
// Types
515
interface NzDrawerOptions<T = any, D = any> extends NzDrawerOptionsOfComponent {
516
  nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type<T>;
517
  nzContentParams?: Partial<T & D>;
518
  nzOnCancel?(this: NzDrawerRef): void;
519
}
520

521
interface NzDrawerOptionsOfComponent {
522
  nzClosable?: boolean;
523
  nzMaskClosable?: boolean;
524
  nzMask?: boolean;
525
  nzKeyboard?: boolean;
526
  nzTitle?: string | TemplateRef<{}>;
527
  nzContent?: TemplateRef<{}> | Type<any>;
528
  nzData?: any;
529
  nzMaskStyle?: NgStyleInterface;
530
  nzBodyStyle?: NgStyleInterface;
531
  nzWrapClassName?: string;
532
  nzWidth?: number | string;
533
  nzHeight?: number | string;
534
  nzPlacement?: 'top' | 'right' | 'bottom' | 'left';
535
  nzZIndex?: number;
536
  nzOffsetX?: number;
537
  nzOffsetY?: number;
538
}
539

540
// Module
541
class NzDrawerModule {
542
  static forRoot(): ModuleWithProviders<NzDrawerModule>;
543
}
544
```
545

546
### Popconfirm Component
547

548
Popconfirm directive for displaying confirmation popover.
549

550
```typescript { .api }
551
/**
552
 * Popconfirm directive
553
 * Selector: [nz-popconfirm]
554
 */
555
interface NzPopconfirmDirective {
556
  /** Popconfirm title */
557
  nzPopconfirmTitle: string | TemplateRef<void>;
558
  /** Trigger type */
559
  nzTrigger: 'click' | 'focus' | 'hover';
560
  /** Placement */
561
  nzPopconfirmPlacement: string;
562
  /** OK text */
563
  nzOkText: string;
564
  /** OK type */
565
  nzOkType: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default' | 'danger';
566
  /** OK danger */
567
  nzOkDanger: boolean;
568
  /** Cancel text */
569
  nzCancelText: string;
570
  /** Condition for showing */
571
  nzCondition: boolean;
572
  /** Icon */
573
  nzIcon: string | TemplateRef<void>;
574
  /** Auto focus */
575
  nzAutoFocus: 'ok' | 'cancel' | null;
576
  /** Popconfirm visible */
577
  nzPopconfirmVisible: boolean;
578
  /** Show arrow */
579
  nzPopconfirmShowArrow: boolean;
580
  /** Backdrop */
581
  nzPopconfirmBackdrop: boolean;
582
  /** Overlay class name */
583
  nzPopconfirmOverlayClassName: string;
584
  /** Overlay style */
585
  nzPopconfirmOverlayStyle: NgStyleInterface;
586
  /** Mouse enter delay */
587
  nzPopconfirmMouseEnterDelay: number;
588
  /** Mouse leave delay */
589
  nzPopconfirmMouseLeaveDelay: number;
590
  /** Confirm event */
591
  nzOnConfirm: EventEmitter<void>;
592
  /** Cancel event */
593
  nzOnCancel: EventEmitter<void>;
594
  /** Visible change event */
595
  nzPopconfirmVisibleChange: EventEmitter<boolean>;
596
}
597

598
// Module
599
class NzPopconfirmModule {
600
  static forRoot(): ModuleWithProviders<NzPopconfirmModule>;
601
}
602
```
603

604
### Result Component
605

606
Result component for displaying operation results.
607

608
```typescript { .api }
609
/**
610
 * Result component
611
 * Selector: nz-result
612
 */
613
interface NzResultComponent {
614
  /** Result icon */
615
  nzIcon: string | TemplateRef<void>;
616
  /** Result status */
617
  nzStatus: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
618
  /** Result title */
619
  nzTitle: string | TemplateRef<void>;
620
  /** Result subtitle */
621
  nzSubTitle: string | TemplateRef<void>;
622
  /** Extra content */
623
  nzExtra: string | TemplateRef<void>;
624
}
625

626
/**
627
 * Result title directive
628
 * Selector: [nz-result-title]
629
 */
630
interface NzResultTitleDirective {}
631

632
/**
633
 * Result subtitle directive
634
 * Selector: [nz-result-subtitle]
635
 */
636
interface NzResultSubtitleDirective {}
637

638
/**
639
 * Result content directive
640
 * Selector: [nz-result-content]
641
 */
642
interface NzResultContentDirective {}
643

644
/**
645
 * Result extra directive
646
 * Selector: [nz-result-extra]
647
 */
648
interface NzResultExtraDirective {}
649

650
/**
651
 * Result icon directive
652
 * Selector: [nz-result-icon]
653
 */
654
interface NzResultIconDirective {}
655

656
// Module
657
class NzResultModule {
658
  static forRoot(): ModuleWithProviders<NzResultModule>;
659
}
660
```
661

662
### Skeleton Component
663

664
Skeleton component for showing loading placeholders.
665

666
```typescript { .api }
667
/**
668
 * Skeleton component
669
 * Selector: nz-skeleton
670
 */
671
interface NzSkeletonComponent {
672
  /** Show skeleton */
673
  nzActive: boolean;
674
  /** Show avatar */
675
  nzAvatar: boolean | NzSkeletonAvatar;
676
  /** Loading state */
677
  nzLoading: boolean;
678
  /** Show paragraph */
679
  nzParagraph: boolean | NzSkeletonParagraph;
680
  /** Show title */
681
  nzTitle: boolean | NzSkeletonTitle;
682
  /** Rounded skeleton */
683
  nzRound: boolean;
684
}
685

686
// Types
687
interface NzSkeletonAvatar {
688
  size?: 'large' | 'small' | 'default' | number;
689
  shape?: 'circle' | 'square';
690
}
691

692
interface NzSkeletonTitle {
693
  width?: number | string;
694
}
695

696
interface NzSkeletonParagraph {
697
  rows?: number;
698
  width?: number | string | Array<number | string>;
699
}
700

701
// Module
702
class NzSkeletonModule {
703
  static forRoot(): ModuleWithProviders<NzSkeletonModule>;
704
}
705
```
706

707
### Spin Component
708

709
Spin component for loading indicators.
710

711
```typescript { .api }
712
/**
713
 * Spin component
714
 * Selector: nz-spin
715
 */
716
interface NzSpinComponent {
717
  /** Spinning state */
718
  nzSpinning: boolean;
719
  /** Spin size */
720
  nzSize: 'small' | 'default' | 'large';
721
  /** Loading tip */
722
  nzTip: string | null;
723
  /** Custom indicator */
724
  nzIndicator: TemplateRef<void> | null;
725
  /** Delay before showing */
726
  nzDelay: number;
727
  /** Simple mode */
728
  nzSimple: boolean;
729
}
730

731
// Module
732
class NzSpinModule {
733
  static forRoot(): ModuleWithProviders<NzSpinModule>;
734
}
735
```