fix(module:modal): nzModalFooter not work when the modal open on in…

…it (#4954) close #4948
NG-ZORRO · Apr 2, 2020 · 2f400e8 · 2f400e8
1 parent 49b5bef
commit 2f400e8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 19 deletions.
diff --git a/components/modal/modal-footer.directive.spec.ts b/components/modal/modal-footer.directive.spec.ts
@@ -1,6 +1,6 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, flush, inject, TestBed } from '@angular/core/testing';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -19,7 +19,7 @@ describe('modal footer directive', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NzModalModule, NoopAnimationsModule],
-      declarations: [TestDirectiveFooterComponent, TestDirectiveFooterInServiceComponent],
+      declarations: [TestDirectiveFooterComponent, TestDirectiveFooterInServiceComponent, TestDirectiveFooterWithInitOpenedComponent],
       providers: [NzModalService]
     });
 
@@ -45,13 +45,27 @@ describe('modal footer directive', () => {
     testComponent.showModal();
     fixture.detectChanges();
     expect(testComponent.isVisible).toBe(true);
-
-    expect(testComponent.nzModalComponent.nzFooter).toBe(testComponent.nzModalFooterDirective.templateRef);
+    const modalRef = testComponent.nzModalComponent.getModalRef();
+    expect(modalRef!.getConfig().nzFooter).toBe(testComponent.nzModalFooterDirective.templateRef);
 
     testComponent.handleCancel();
     fixture.detectChanges();
   });
 
+  it('should work with template when init opened', fakeAsync(() => {
+    const initOpenedComponentFixture = TestBed.createComponent(TestDirectiveFooterWithInitOpenedComponent);
+    const initOpenedComponent = initOpenedComponentFixture.componentInstance;
+    initOpenedComponentFixture.detectChanges();
+    expect(initOpenedComponent.isVisible).toBe(true);
+    flush();
+    initOpenedComponentFixture.detectChanges();
+    const modalRef = initOpenedComponent.nzModalComponent.getModalRef();
+
+    expect(modalRef!.getConfig().nzFooter).toBe(initOpenedComponent.nzModalFooterDirective.templateRef);
+
+    initOpenedComponentFixture.detectChanges();
+  }));
+
   it('should work with service', () => {
     const modalRef = modalService.create({ nzContent: TestDirectiveFooterInServiceComponent, nzFooter: null });
     fixture.detectChanges();
@@ -89,6 +103,26 @@ class TestDirectiveFooterComponent {
   }
 }
 
+@Component({
+  template: `
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title">
+      <div>
+        <p>Modal Content</p>
+      </div>
+      <div *nzModalFooter>
+        <button id="btn-template" nz-button nzType="default">Custom Callback</button>
+      </div>
+    </nz-modal>
+  `
+})
+class TestDirectiveFooterWithInitOpenedComponent {
+  isVisible = true;
+  @ViewChild(NzModalComponent) nzModalComponent: NzModalComponent;
+  @ViewChild(NzModalFooterDirective) nzModalFooterDirective: NzModalFooterDirective;
+
+  constructor() {}
+}
+
 @Component({
   template: `
     <div *nzModalFooter>

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -41,9 +41,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'modal';
 @Component({
   selector: 'nz-modal',
   exportAs: 'nzModal',
-  template: `
-    <ng-template><ng-content></ng-content></ng-template>
-  `,
+  template: ` <ng-template><ng-content></ng-content></ng-template> `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges, NzModalLegacyAPI<T, R> {
@@ -142,27 +140,19 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   }
 
   triggerOk(): void {
-    if (this.modalRef) {
-      this.modalRef.triggerOk();
-    }
+    this.modalRef?.triggerOk();
   }
 
   triggerCancel(): void {
-    if (this.modalRef) {
-      this.modalRef.triggerCancel();
-    }
+    this.modalRef?.triggerCancel();
   }
 
   getContentComponent(): T | void {
-    if (this.modalRef) {
-      return this.modalRef.getContentComponent();
-    }
+    return this.modalRef?.getContentComponent();
   }
 
   getElement(): HTMLElement | void {
-    if (this.modalRef) {
-      return this.modalRef.getElement();
-    }
+    return this.modalRef?.getElement();
   }
 
   getModalRef(): NzModalRef | null {
@@ -171,6 +161,15 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
 
   private setFooterWithTemplate(templateRef: TemplateRef<{}>): void {
     this.nzFooter = templateRef;
+    if (this.modalRef) {
+      // If modalRef already created, set the footer in next tick
+      Promise.resolve().then(() => {
+        this.modalRef!.updateConfig({
+          nzFooter: this.nzFooter
+        });
+      });
+    }
+
     this.cdr.markForCheck();
   }