test(module:modal): update to zoneless mode (#9608)

Author: Laffery

components/modal/demo/async.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, model, signal } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -11,33 +11,33 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
       <span>Show Modal</span>
     </button>
     <nz-modal
-      [(nzVisible)]="isVisible"
+      [(nzVisible)]="visible"
       nzTitle="Modal Title"
       (nzOnCancel)="handleCancel()"
       (nzOnOk)="handleOk()"
-      [nzOkLoading]="isOkLoading"
+      [nzOkLoading]="loading()"
     >
       <p *nzModalContent>Modal Content</p>
     </nz-modal>
   `
 })
 export class NzDemoModalAsyncComponent {
-  isVisible = false;
-  isOkLoading = false;
+  visible = model(false);
+  loading = signal(false);
 
   showModal(): void {
-    this.isVisible = true;
+    this.visible.set(true);
   }
 
   handleOk(): void {
-    this.isOkLoading = true;
+    this.loading.set(true);
     setTimeout(() => {
-      this.isVisible = false;
-      this.isOkLoading = false;
+      this.visible.set(false);
+      this.loading.set(false);
     }, 3000);
   }
 
   handleCancel(): void {
-    this.isVisible = false;
+    this.visible.set(false);
   }
 }

components/modal/demo/service.ts

@@ -185,28 +185,24 @@ export class NzDemoModalServiceComponent {
   selector: 'nz-modal-custom-component',
   imports: [NzButtonModule],
   template: `
-    <div>
-      <h2>{{ title }}</h2>
-      <h4>{{ subtitle }}</h4>
-      <p
-        >My favorite framework is {{ nzModalData.favoriteFramework }} and my favorite library is
-        {{ nzModalData.favoriteLibrary }}
-      </p>
-      <p>
-        <span>Get Modal instance in component</span>
-        <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
-      </p>
-    </div>
+    <h2>{{ title }}</h2>
+    <h4>{{ subtitle }}</h4>
+    <p>
+      My favorite framework is {{ nzModalData.favoriteFramework }} and my favorite library is
+      {{ nzModalData.favoriteLibrary }}
+    </p>
+    <br />
+    <button nz-button (click)="destroyModal()">destroy modal in the component</button>
   `
 })
 export class NzModalCustomComponent {
   @Input() title?: string;
   @Input() subtitle?: string;
 
-  readonly #modal = inject(NzModalRef);
-  readonly nzModalData: IModalData = inject(NZ_MODAL_DATA);
+  readonly modalRef = inject(NzModalRef);
+  readonly nzModalData = inject<IModalData>(NZ_MODAL_DATA);
 
   destroyModal(): void {
-    this.#modal.destroy({ data: 'this the result data' });
+    this.modalRef.destroy({ data: 'this the result data' });
   }
 }

components/modal/modal-ref.ts

@@ -194,11 +194,13 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
       const result = trigger(this.getContentComponent());
       if (isPromise(result)) {
         this.config[loadingKey] = true;
+        this.updateConfig(this.config);
         let doClose: boolean | void | {} = false;
         try {
           doClose = (await result) as typeof result;
         } finally {
           this.config[loadingKey] = false;
+          this.updateConfig(this.config);
           this.closeWhitResult(doClose);
         }
       } else {