Modal对话框

    需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 在当前页面正中打开一个浮层，承载相应的操作。

    另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 NzModalService.confirm() 等方法。

    推荐使用加载Component的方式弹出Modal，这样弹出层的Component逻辑可以与外层Component完全隔离，并且做到可以随时复用，

    在弹出层Component中可以通过依赖注入NzModalRef方式直接获取模态框的组件实例，用于控制在弹出层组件中控制模态框行为。

    基本

    第一个对话框。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-basic',
    5.   template: `
    6.     <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
    7.     <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    8.       <p>Content one</p>
    9.       <p>Content two</p>
    10.       <p>Content three</p>
    11.       <p>Content three</p>
    12.     </nz-modal>
    13.   `
    14. })
    15. export class NzDemoModalBasicComponent {
    16.   isVisible = false;
    18.   constructor() {}
    20.   showModal(): void {
    21.     this.isVisible = true;
    22.   }
    24.   handleOk(): void {
    25.     console.log('Button ok clicked!');
    26.     this.isVisible = false;
    27.   }
    29.   handleCancel(): void {
    30.     console.log('Button cancel clicked!');
    31.     this.isVisible = false;
    32.   }
    33. }

    Modal对话框 - 图4

    自定义页脚

    更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。

    不需要默认确定取消按钮时，你可以把 nzFooter 设为 null。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-footer',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModal()">
    7.       <span>Show Modal</span>
    8.     </button>
    9.     <nz-modal
    10.       [(nzVisible)]="isVisible"
    11.       [nzTitle]="modalTitle"
    12.       [nzContent]="modalContent"
    13.       [nzFooter]="modalFooter"
    14.       (nzOnCancel)="handleCancel()"
    15.     >
    16.       <ng-template #modalTitle>
    17.         Custom Modal Title
    18.       </ng-template>
    20.       <ng-template #modalContent>
    21.         <p>Modal Content</p>
    22.         <p>Modal Content</p>
    23.         <p>Modal Content</p>
    24.         <p>Modal Content</p>
    25.         <p>Modal Content</p>
    26.       </ng-template>
    28.       <ng-template #modalFooter>
    29.         <span>Modal Footer: </span>
    30.         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    31.         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
    32.       </ng-template>
    33.     </nz-modal>
    34.   `
    35. })
    36. export class NzDemoModalFooterComponent {
    37.   isVisible = false;
    38.   isConfirmLoading = false;
    40.   constructor() {}
    42.   showModal(): void {
    43.     this.isVisible = true;
    44.   }
    46.   handleOk(): void {
    47.     this.isConfirmLoading = true;
    48.     setTimeout(() => {
    49.       this.isVisible = false;
    50.       this.isConfirmLoading = false;
    51.     }, 3000);
    52.   }
    54.   handleCancel(): void {
    55.     this.isVisible = false;
    56.   }
    57. }

    确认对话框

    使用 NzModalService.confirm() 可以快捷地弹出确认框。

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-confirm',
    6.   template: `
    7.     <button nz-button nzType="primary" (click)="showConfirm()">Confirm</button>
    8.     <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
    9.   `,
    10.   styles: [
    11.     `
    12.       button {
    13.         margin-right: 8px;
    14.       }
    15.     `
    16.   ]
    17. })
    18. export class NzDemoModalConfirmComponent {
    19.   constructor(private modal: NzModalService) {}
    21.   showConfirm(): void {
    22.     this.modal.confirm({
    23.       nzTitle: '<i>Do you Want to delete these items?</i>',
    24.       nzContent: '<b>Some descriptions</b>',
    25.       nzOnOk: () => console.log('OK')
    26.     });
    27.   }
    29.   showDeleteConfirm(): void {
    30.     this.modal.confirm({
    31.       nzTitle: 'Are you sure delete this task?',
    32.       nzContent: '<b style="color: red;">Some descriptions</b>',
    33.       nzOkText: 'Yes',
    34.       nzOkType: 'danger',
    35.       nzOnOk: () => console.log('OK'),
    36.       nzCancelText: 'No',
    37.       nzOnCancel: () => console.log('Cancel')
    38.     });
    39.   }
    40. }

    Modal对话框 - 图6

    信息提示

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-info',
    6.   template: `
    7.     <button nz-button (click)="info()">Info</button>
    8.     <button nz-button (click)="success()">Success</button>
    9.     <button nz-button (click)="error()">Error</button>
    10.     <button nz-button (click)="warning()">Warning</button>
    11.   `,
    12.   styles: [
    13.     `
    14.       button {
    15.         margin-right: 8px;
    16.       }
    17.     `
    18.   ]
    19. })
    20. export class NzDemoModalInfoComponent {
    21.   constructor(private modal: NzModalService) {}
    23.   info(): void {
    24.     this.modal.info({
    25.       nzTitle: 'This is a notification message',
    26.       nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
    27.       nzOnOk: () => console.log('Info OK')
    28.     });
    29.   }
    31.   success(): void {
    32.     this.modal.success({
    33.       nzTitle: 'This is a success message',
    34.       nzContent: 'some messages...some messages...'
    35.     });
    36.   }
    38.   error(): void {
    39.     this.modal.error({
    40.       nzTitle: 'This is an error message',
    41.       nzContent: 'some messages...some messages...'
    42.     });
    43.   }
    45.   warning(): void {
    46.     this.modal.warning({
    47.       nzTitle: 'This is an warning message',
    48.       nzContent: 'some messages...some messages...'
    49.     });
    50.   }
    51. }

    手动移除

    手动关闭modal。

    Modal对话框 - 图8

    服务方式创建

    Modal的service用法，示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。

    使用模版作为内容或页脚时的上下文为 { $implicit: nzComponentParams, modalRef: NzModalRef }

    1. /* declarations: NzModalCustomComponent */
    3. import { Component, Input, TemplateRef, ViewContainerRef } from '@angular/core';
    4. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
    6. @Component({
    7.   selector: 'nz-demo-modal-service',
    8.   template: `
    9.     <button nz-button nzType="primary" (click)="createModal()">
    10.       <span>String</span>
    11.     </button>
    13.     <button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
    14.       <span>Template</span>
    15.     </button>
    16.     <ng-template #tplTitle>
    17.       <span>Title Template</span>
    18.     </ng-template>
    19.     <ng-template #tplContent let-params>
    20.       <p>some contents...</p>
    21.       <p>some contents...</p>
    22.       <p>{{ params.value }}</p>
    23.     </ng-template>
    24.     <ng-template #tplFooter let-ref="modalRef">
    25.       <button nz-button (click)="ref.destroy()">Destroy</button>
    26.       <button nz-button nzType="primary" (click)="destroyTplModal(ref)" [nzLoading]="tplModalButtonLoading">Close after submit</button>
    28.     <br />
    29.     <br />
    31.     <button nz-button nzType="primary" (click)="createComponentModal()">
    32.       <span>Use Component</span>
    33.     </button>
    35.     <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
    37.     <br />
    38.     <br />
    40.     <button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
    41.     <nz-modal [(nzVisible)]="htmlModalVisible" nzMask="false" [nzZIndex]="1001" nzTitle="Non-service html modal">
    42.       This is a non-service html modal
    43.     </nz-modal>
    44.   `,
    45.   styles: [
    46.     `
    47.       button {
    48.         margin-right: 8px;
    49.       }
    50.     `
    51.   ]
    53. export class NzDemoModalServiceComponent {
    54.   tplModalButtonLoading = false;
    55.   htmlModalVisible = false;
    56.   disabled = false;
    58.   constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) {}
    60.   createModal(): void {
    61.     this.modal.create({
    62.       nzTitle: 'Modal Title',
    63.       nzContent: 'string, will close after 1 sec',
    64.       nzClosable: false,
    65.       nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
    66.     });
    67.   }
    69.   createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
    70.     this.modal.create({
    71.       nzTitle: tplTitle,
    72.       nzContent: tplContent,
    73.       nzFooter: tplFooter,
    74.       nzMaskClosable: false,
    75.       nzClosable: false,
    76.       nzComponentParams: {
    77.         value: 'Template Context'
    78.       },
    79.       nzOnOk: () => console.log('Click ok')
    80.     });
    81.   }
    83.   destroyTplModal(modelRef: NzModalRef): void {
    84.     this.tplModalButtonLoading = true;
    85.     setTimeout(() => {
    86.       this.tplModalButtonLoading = false;
    87.       modelRef.destroy();
    88.     }, 1000);
    89.   }
    91.   createComponentModal(): void {
    92.     const modal = this.modal.create({
    93.       nzTitle: 'Modal Title',
    94.       nzContent: NzModalCustomComponent,
    95.       nzViewContainerRef: this.viewContainerRef,
    96.       nzComponentParams: {
    97.         title: 'title in component',
    98.         subtitle: 'component sub title，will be changed after 2 sec'
    99.       },
    100.       nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000)),
    101.       nzFooter: [
    102.         {
    103.           label: 'change component title from outside',
    104.           onClick: componentInstance => {
    105.             componentInstance!.title = 'title in inner component is changed';
    106.           }
    107.         }
    108.       ]
    109.     });
    110.     const instance = modal.getContentComponent();
    111.     modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    112.     // Return a result when closed
    113.     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
    115.     // delay until modal instance created
    116.     setTimeout(() => {
    117.       instance.subtitle = 'sub title is changed';
    118.     }, 2000);
    119.   }
    121.   createCustomButtonModal(): void {
    122.     const modal: NzModalRef = this.modal.create({
    123.       nzTitle: 'custom button demo',
    124.       nzContent: 'pass array of button config to nzFooter to create multiple buttons',
    125.       nzFooter: [
    126.         {
    127.           label: 'Close',
    128.           shape: 'round',
    129.           onClick: () => modal.destroy()
    130.         },
    131.         {
    132.           label: 'Confirm',
    133.           type: 'primary',
    134.           onClick: () => this.modal.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
    135.         },
    136.         {
    137.           label: 'Change Button Status',
    138.           type: 'danger',
    139.           loading: false,
    140.           onClick(): void {
    141.             this.loading = true;
    142.             setTimeout(() => (this.loading = false), 1000);
    143.             setTimeout(() => {
    144.               this.loading = false;
    145.               this.disabled = true;
    146.               this.label = 'can not be clicked！';
    147.             }, 2000);
    148.           }
    149.         },
    150.         {
    151.           label: 'async load',
    152.           type: 'dashed',
    153.           onClick: () => new Promise(resolve => setTimeout(resolve, 2000))
    154.         }
    155.       ]
    156.     });
    157.   }
    159.   openAndCloseAll(): void {
    160.     let pos = 0;
    162.     ['create', 'info', 'success', 'error'].forEach(method =>
    163.       // @ts-ignore
    164.       this.modal[method]({
    165.         nzMask: false,
    166.         nzTitle: `Test ${method} title`,
    167.         nzContent: `Test content: <b>${method}</b>`,
    168.         nzStyle: { position: 'absolute', top: `${pos * 70}px`, left: `${pos++ * 300}px` }
    169.       })
    170.     );
    172.     this.htmlModalVisible = true;
    174.     this.modal.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
    176.     setTimeout(() => this.modal.closeAll(), 2000);
    177.   }
    178. }
    180. @Component({
    181.   selector: 'nz-modal-custom-component',
    182.   template: `
    183.     <div>
    184.       <h2>{{ title }}</h2>
    185.       <h4>{{ subtitle }}</h4>
    186.       <p>
    187.         <span>Get Modal instance in component</span>
    188.         <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
    189.       </p>
    190.     </div>
    191.   `
    192. })
    193. export class NzModalCustomComponent {
    194.   @Input() title?: string;
    195.   @Input() subtitle?: string;
    197.   constructor(private modal: NzModalRef) {}
    199.   destroyModal(): void {
    200.     this.modal.destroy({ data: 'this the result data' });
    201.   }
    202. }

    异步关闭

    点击确定后异步关闭对话框，例如提交表单。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-async',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModal()">
    7.       <span>Show Modal</span>
    8.     </button>
    9.     <nz-modal
    10.       [(nzVisible)]="isVisible"
    11.       nzTitle="Modal Title"
    12.       (nzOnCancel)="handleCancel()"
    13.       (nzOnOk)="handleOk()"
    14.       [nzOkLoading]="isOkLoading"
    15.     >
    16.       <p>Modal Content</p>
    17.     </nz-modal>
    18.   `
    19. })
    20. export class NzDemoModalAsyncComponent {
    21.   isVisible = false;
    22.   isOkLoading = false;
    24.   showModal(): void {
    25.     this.isVisible = true;
    26.   }
    28.   handleOk(): void {
    29.     this.isOkLoading = true;
    30.     setTimeout(() => {
    31.       this.isVisible = false;
    32.       this.isOkLoading = false;
    33.     }, 3000);
    34.   }
    36.   handleCancel(): void {
    37.     this.isVisible = false;
    38.   }
    39. }

    Modal对话框 - 图10

    自定义页脚(2)

    使用 nzModalFooter 指令自定义了页脚的按钮。

    1. /* declarations: NzModalCustomFooterComponent */
    3. import { Component } from '@angular/core';
    4. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
    5. @Component({
    6.   selector: 'nz-demo-modal-footer2',
    7.   template: `
    8.     <button nz-button nzType="primary" (click)="showModal1()">
    9.       <span>In Template</span>
    10.     </button>
    11.     <br />
    12.     <br />
    13.     <button nz-button nzType="primary" (click)="showModal2()">
    14.       <span>In Component</span>
    15.     </button>
    16.     <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
    17.       <div>
    18.         <p>Modal Content</p>
    19.         <p>Modal Content</p>
    20.         <p>Modal Content</p>
    21.         <p>Modal Content</p>
    22.         <p>Modal Content</p>
    23.       </div>
    24.       <div *nzModalFooter>
    25.         <span>Modal Footer: </span>
    26.         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    27.         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
    28.       </div>
    29.     </nz-modal>
    30.   `,
    31.   styles: []
    32. })
    33. export class NzDemoModalFooter2Component {
    34.   isVisible = false;
    35.   isConfirmLoading = false;
    37.   constructor(private modalService: NzModalService) {}
    39.   showModal1(): void {
    40.     this.isVisible = true;
    41.   }
    43.   showModal2(): void {
    44.     this.modalService.create({
    45.       nzTitle: 'Modal Title',
    46.       nzContent: NzModalCustomFooterComponent
    47.     });
    48.   }
    50.   handleOk(): void {
    51.     this.isConfirmLoading = true;
    52.     setTimeout(() => {
    53.       this.isVisible = false;
    54.       this.isConfirmLoading = false;
    55.     }, 3000);
    56.   }
    58.   handleCancel(): void {
    59.     this.isVisible = false;
    60.   }
    61. }
    63. @Component({
    64.   selector: 'nz-modal-custom-footer-component',
    65.   template: `
    66.     <div>
    67.       <p>Modal Content</p>
    68.       <p>Modal Content</p>
    69.       <p>Modal Content</p>
    70.       <p>Modal Content</p>
    71.       <p>Modal Content</p>
    72.     </div>
    73.     <div *nzModalFooter>
    74.       <button nz-button nzType="default" (click)="destroyModal()">Custom Callback</button>
    75.       <button nz-button nzType="primary" (click)="destroyModal()">Custom Submit</button>
    76.     </div>
    77.   `
    78. })
    79. export class NzModalCustomFooterComponent {
    80.   constructor(private modal: NzModalRef) {}
    82.   destroyModal(): void {
    83.     this.modal.destroy();
    84.   }
    85. }

    确认对话框

    使用 NzModalService.confirm() 可以快捷地弹出确认框。NzOnCancel/NzOnOk 返回 promise 可以延迟关闭

    1. import { Component } from '@angular/core';
    2. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-confirm-promise',
    6.   template: ` <button nz-button nzType="primary" (click)="showConfirm()">Confirm</button> `
    7. })
    8. export class NzDemoModalConfirmPromiseComponent {
    9.   confirmModal?: NzModalRef; // For testing by now
    11.   constructor(private modal: NzModalService) {}
    13.   showConfirm(): void {
    14.     this.confirmModal = this.modal.confirm({
    15.       nzTitle: 'Do you Want to delete these items?',
    16.       nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
    17.       nzOnOk: () =>
    18.         new Promise((resolve, reject) => {
    19.           setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
    20.         }).catch(() => console.log('Oops errors!'))
    21.     });
    22.   }
    23. }

    国际化

    设置 nzOkText 与 nzCancelText 以自定义按钮文字。

    Modal对话框 - 图13

    自定义位置

    您可以直接使用 nzStyle.top 或配合其他样式来设置对话框位置。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-position',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
    7.     <nz-modal
    8.       [nzStyle]="{ top: '20px' }"
    9.       [(nzVisible)]="isVisibleTop"
    10.       nzTitle="20px to Top"
    11.       (nzOnCancel)="handleCancelTop()"
    12.       (nzOnOk)="handleOkTop()"
    13.     >
    14.       <p>some contents...</p>
    15.       <p>some contents...</p>
    16.       <p>some contents...</p>
    17.     </nz-modal>
    19.     <br /><br />
    21.     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
    22.     <nz-modal
    23.       nzWrapClassName="vertical-center-modal"
    24.       [(nzVisible)]="isVisibleMiddle"
    25.       nzTitle="Vertically centered modal dialog"
    26.       (nzOnCancel)="handleCancelMiddle()"
    27.       (nzOnOk)="handleOkMiddle()"
    28.     >
    29.       <p>some contents...</p>
    30.       <p>some contents...</p>
    31.       <p>some contents...</p>
    32.     </nz-modal>
    33.   `,
    34.   styles: [
    35.     `
    36.       ::ng-deep .vertical-center-modal {
    37.         display: flex;
    38.         align-items: center;
    39.         justify-content: center;
    40.       }
    42.       ::ng-deep .vertical-center-modal .ant-modal {
    43.         top: 0;
    44.       }
    45.     `
    46.   ]
    47. })
    48. export class NzDemoModalPositionComponent {
    49.   isVisibleTop = false;
    50.   isVisibleMiddle = false;
    52.   showModalTop(): void {
    53.     this.isVisibleTop = true;
    54.   }
    56.   showModalMiddle(): void {
    57.     this.isVisibleMiddle = true;
    58.   }
    60.   handleOkTop(): void {
    61.     console.log('点击了确定');
    62.     this.isVisibleTop = false;
    63.   }
    65.   handleCancelTop(): void {
    66.     this.isVisibleTop = false;
    67.   }
    69.   handleOkMiddle(): void {
    70.     console.log('click ok');
    71.     this.isVisibleMiddle = false;
    72.   }
    74.   handleCancelMiddle(): void {
    75.     this.isVisibleMiddle = false;
    76.   }
    77. }

    对话框当前分为2种模式，普通模式 和 确认框模式（即Confirm对话框，通过调用confirm/info/success/error/warning弹出），两种模式对API的支持程度稍有不同。

    注意

    采用服务方式创建普通模式对话框

    包括：

    • NzModalService.info
    • NzModalService.success
    • NzModalService.error
    • NzModalService.warning
    • NzModalService.confirm

    以上均为一个函数，参数为 object，与上方API一致。部分属性类型或初始值有所不同，已列在下方：

    以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

    1. constructor(modal: NzModalService) {
    2.   const ref: NzModalRef = modal.info();
    3.   ref.close(); // 或 ref.destroy(); 将直接销毁对话框
    4. }

    NzModalService的其他方法/属性service

    NzModalRef

    通过服务方式 NzModalService.xxx() 创建的对话框，都会返回一个 NzModalRef 对象，用于操控该对话框（若使用nzContent为Component时，也可通过依赖注入 NzModalRef 方式获得此对象），该对象具有以下方法：

    可将此类型数组传入 nzFooter，用于自定义底部按钮。

    按钮配置项如下（与button组件保持一致）：

    1. nzFooter: [{
    2.   label: string; // 按钮文本
    3.   type?: string; // 类型
    4.   shape?: string; // 形状
    5.   ghost?: boolean; // 是否ghost
    6.   size?: string; // 大小
    7.   autoLoading?: boolean; // 默认为true，若为true时，当onClick返回promise时此按钮将自动置为loading状态
    9.   // 提示：下方方法的this指向该配置对象自身。当nzContent为组件类时，下方方法传入的contentComponentInstance参数为该组件类的实例
    10.   // 是否显示该按钮
    11.   show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    12.   // 是否显示为loading
    13.   loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    14.   // 是否禁用
    15.   disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    16.   // 按钮点击回调
    17.   onClick?(this: ModalButtonOptions, contentComponentInstance?: object): void | Promise&lt;void&gt; | any;
    18. }]

    另一种自定义页脚按钮的方式。

    1. <div *nzModalFooter>
    2.   <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    3.   <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
    4. </div>
    6. <!-- or -->
    8. <ng-template [nzModalFooter]>
    9.   <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    11. </ng-template>