feat(module:drawer): add nzFooter property (#4618) (#5553)

close #4618

components/drawer/demo/from-drawer.ts

@@ -5,11 +5,12 @@ import { Component } from '@angular/core';
   template: `
     <button nz-button nzType="primary" (click)="open()">Create</button>
     <nz-drawer
-      [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
+      [nzBodyStyle]="{ overflow: 'auto' }"
       [nzMaskClosable]="false"
       [nzWidth]="720"
       [nzVisible]="visible"
       nzTitle="Create"
+      [nzFooter]="footerTpl"
       (nzOnClose)="close()"
     >
       <form nz-form>
@@ -79,6 +80,13 @@ import { Component } from '@angular/core';
             </nz-form-item>
           </div>
         </div>
+
+        <ng-template #footerTpl>
+          <div style="float: right">
+            <button nz-button style="margin-right: 8px;" (click)="close()">Cancel</button>
+            <button nz-button nzType="primary" (click)="close()">Submit</button>
+          </div>
+        </ng-template>
       </form>
     </nz-drawer>
   `

components/drawer/demo/service.ts

@@ -32,6 +32,7 @@ export class NzDemoDrawerServiceComponent {
   openTemplate(): void {
     const drawerRef = this.drawerService.create({
       nzTitle: 'Template',
+      nzFooter: 'Footer',
       nzContent: this.drawerTemplate,
       nzContentParams: {
         value: this.value

components/drawer/doc/index.en-US.md

@@ -31,6 +31,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` |
 | `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` |
 | `[nzTitle]` | The title for Drawer. | `string \| TemplateRef<void>` | - |
+| `[nzFooter]` | The footer for Drawer. | `string \| TemplateRef<void>` | - |
 | `[nzVisible]` | Whether the Drawer dialog is visible or not. | `boolean` | `false` |
 | `[nzPlacement]` | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
 | `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`.  | `number \| string` | `256` |
@@ -62,6 +63,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` |
 | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
 | nzTitle | The title for Drawer. | `string \| TemplateRef<void>` | - |
+| nzFooter | The footer for Drawer. | `string \| TemplateRef<void>` | - |
 | nzWidth |  Width of the Drawer dialog.  | `number \| string` | `256` |
 | nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` | `256` |
 | nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
@@ -91,6 +93,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzMaskStyle | Style for Drawer's mask element. | `object` |
 | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` |
 | nzTitle | The title for Drawer. | `string \| TemplateRef<void>` |
+| nzFooter | The footer for Drawer. | `string \| TemplateRef<void>` |
 | nzWidth |  Width of the Drawer dialog.  | `number \| string` |
 | nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` |
 | nzWrapClassName | The class name of the container of the Drawer dialog. | `string` |

components/drawer/doc/index.zh-CN.md

@@ -30,6 +30,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzKeyboard]` | 是否支持键盘 esc 关闭 | `boolean` | `true` |
 | `[nzBodyStyle]` | Drawer body 样式 | `object` | `{}` |
 | `[nzTitle]` | 标题 | `string \| TemplateRef<void>` | - |
+| `[nzFooter]` | 抽屉的页脚 | `string \| TemplateRef<void>` | - |
 | `[nzVisible]` | Drawer 是否可见 | `boolean` | - |
 | `[nzPlacement]` | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
 | `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效 | `number \| string` | `256` |
@@ -61,6 +62,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzMaskStyle | 遮罩样式 | `object` | `{}` |
 | nzBodyStyle | Modal body 样式 | `object` | `{}` |
 | nzTitle | 标题 | `string \| TemplateRef<void>` | - |
+| nzFooter | 页脚 | `string \| TemplateRef<void>` | - |
 | nzWidth | 宽度 | `number \| string` | `256` |
 | nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
 | nzWrapClassName | 对话框外层容器的类名 | `string` | - |

components/drawer/drawer-options.ts

@@ -17,6 +17,7 @@ export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
   nzKeyboard?: boolean;
   nzNoAnimation?: boolean;
   nzTitle?: string | TemplateRef<{}>;
+  nzFooter?: string | TemplateRef<{}>;
   nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type<T>;
   nzContentParams?: Partial<T & D>;
   nzMaskStyle?: object;

components/drawer/drawer.component.ts

@@ -85,6 +85,9 @@ const NZ_CONFIG_COMPONENT_NAME = 'drawer';
                 </ng-container>
                 <ng-content *ngIf="!nzContent"></ng-content>
               </div>
+              <div *ngIf="nzFooter" class="ant-drawer-footer">
+                <ng-container *nzStringTemplateOutlet="nzFooter"><div [innerHTML]="nzFooter"></div></ng-container>
+              </div>
             </div>
           </div>
         </div>
@@ -111,6 +114,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   @Input() @InputBoolean() nzNoAnimation = false;
   @Input() @InputBoolean() nzKeyboard: boolean = true;
   @Input() nzTitle?: string | TemplateRef<{}>;
+  @Input() nzFooter?: string | TemplateRef<{}>;
   @Input() nzPlacement: NzDrawerPlacement = 'right';
   @Input() nzMaskStyle: NgStyleInterface = {};
   @Input() nzBodyStyle: NgStyleInterface = {};

components/drawer/drawer.spec.ts

@@ -195,6 +195,22 @@ describe('NzDrawerComponent', () => {
     expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title .custom-title')).not.toBe(null);
   });
 
+  it('should support string footer', () => {
+    component.footer = 'test';
+    component.open();
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-footer') as HTMLElement).innerText.trim()).toBe('test');
+  });
+
+  it('should support TemplateRef footer', () => {
+    component.footer = component.templateFooter;
+    component.open();
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+    expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-footer .custom-footer')).not.toBe(null);
+  });
+
   it('should support custom width', () => {
     component.width = '500px';
     component.open();
@@ -433,6 +449,7 @@ describe('NzDrawerService', () => {
     const closeSpy = jasmine.createSpy('afterClose spy').and.returnValue(1);
     const drawerRef = drawerService.create({
       nzTitle: 'Service',
+      nzFooter: 'Footer',
       nzContent: NzDrawerCustomComponent,
       nzContentParams: { value: 1 }
     });
@@ -486,6 +503,10 @@ describe('NzDrawerService', () => {
       <span class="custom-title">title</span>
       <button class="close-btn"></button>
     </ng-template>
+    <ng-template #customFooter>
+      <span class="custom-footer">footer</span>
+      <button>Submit</button>
+    </ng-template>
     <nz-drawer
       [nzMaskStyle]="{ color: 'gray' }"
       [nzBodyStyle]="{ color: 'gray' }"
@@ -500,6 +521,7 @@ describe('NzDrawerService', () => {
       [nzPlacement]="placement"
       [nzNoAnimation]="noAnimation"
       [nzTitle]="title"
+      [nzFooter]="footer"
       [nzOffsetX]="offsetX"
       [nzOffsetY]="offsetY"
       (nzOnClose)="close()"
@@ -516,6 +538,7 @@ class NzTestDrawerComponent {
   maskClosable = true;
   showMask = true;
   title: string | TemplateRef<void> = '';
+  footer: string | TemplateRef<void> = '';
   stringTitle = 'test';
   width: string | number = '300px';
   height: string | number = '300px';
@@ -524,6 +547,7 @@ class NzTestDrawerComponent {
   offsetX = 0;
   offsetY = 0;
   @ViewChild('customTitle', { static: false }) templateTitle!: TemplateRef<void>;
+  @ViewChild('customFooter', { static: false }) templateFooter!: TemplateRef<void>;
   @ViewChild(NzDrawerComponent, { static: false }) drawerComponent!: NzDrawerComponent;
 
   open(): void {