refactor(module:modal): migrate demo to standalone mode (#8796)

NG-ZORRO · Sep 25, 2024 · 4f536ce · 4f536ce
1 parent 334ce11
commit 4f536ce
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 86 deletions.
diff --git a/components/modal/demo/async.ts b/components/modal/demo/async.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @Component({
   selector: 'nz-demo-modal-async',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="showModal()">
       <span>Show Modal</span>

diff --git a/components/modal/demo/basic.ts b/components/modal/demo/basic.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @Component({
   selector: 'nz-demo-modal-basic',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
     <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
@@ -16,8 +21,6 @@ import { Component } from '@angular/core';
 export class NzDemoModalBasicComponent {
   isVisible = false;
 
-  constructor() {}
-
   showModal(): void {
     this.isVisible = true;
   }

diff --git a/components/modal/demo/confirm-promise.ts b/components/modal/demo/confirm-promise.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 
-import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm-promise',
-  template: ` <button nz-button nzType="primary" (click)="showConfirm()">Confirm</button> `
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
+  template: `<button nz-button nzType="primary" (click)="showConfirm()">Confirm</button>`
 })
 export class NzDemoModalConfirmPromiseComponent {
   confirmModal?: NzModalRef; // For testing by now

diff --git a/components/modal/demo/confirm.ts b/components/modal/demo/confirm.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="showConfirm()">Confirm</button>
     <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>

diff --git a/components/modal/demo/draggable.ts b/components/modal/demo/draggable.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @Component({
   selector: 'nz-demo-modal-draggable',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="default" (click)="showModal()">
       <span>Open Draggable Modal</span>
@@ -25,8 +30,6 @@ import { Component } from '@angular/core';
 export class NzDemoModalDraggableComponent {
   isVisible = false;
 
-  constructor() {}
-
   showModal(): void {
     this.isVisible = true;
   }

diff --git a/components/modal/demo/footer.ts b/components/modal/demo/footer.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @Component({
   selector: 'nz-demo-modal-footer',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="showModal()">
       <span>Show Modal</span>
@@ -35,8 +40,6 @@ export class NzDemoModalFooterComponent {
   isVisible = false;
   isConfirmLoading = false;
 
-  constructor() {}
-
   showModal(): void {
     this.isVisible = true;
   }

diff --git a/components/modal/demo/footer2.ts b/components/modal/demo/footer2.ts
@@ -2,10 +2,13 @@
 
 import { Component } from '@angular/core';
 
-import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-footer2',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="showModal1()">
       <span>In Template</span>
@@ -64,6 +67,8 @@ export class NzDemoModalFooter2Component {
 
 @Component({
   selector: 'nz-modal-custom-footer-component',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <div>
       <p>Modal Content</p>

diff --git a/components/modal/demo/info.ts b/components/modal/demo/info.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-info',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button (click)="info()">Info</button>
     <button nz-button (click)="success()">Success</button>

diff --git a/components/modal/demo/locale.ts b/components/modal/demo/locale.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-locale',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <div>
       <button nz-button nzType="primary" (click)="showModal()">Modal</button>

diff --git a/components/modal/demo/manual.ts b/components/modal/demo/manual.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-manual',
-  template: ` <button nz-button (click)="success()">Success</button> `
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
+  template: `<button nz-button (click)="success()">Success</button>`
 })
 export class NzDemoModalManualComponent {
   constructor(private modalService: NzModalService) {}

diff --git a/components/modal/demo/module b/components/modal/demo/module
diff --git a/components/modal/demo/position.ts b/components/modal/demo/position.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @Component({
   selector: 'nz-demo-modal-position',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
     <nz-modal

diff --git a/components/modal/demo/service.ts b/components/modal/demo/service.ts
@@ -2,7 +2,8 @@
 
 import { Component, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
-import { NzModalRef, NzModalService, NZ_MODAL_DATA } from 'ng-zorro-antd/modal';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalRef, NzModalService, NZ_MODAL_DATA, NzModalModule } from 'ng-zorro-antd/modal';
 
 interface IModalData {
   favoriteLibrary: string;
@@ -11,6 +12,8 @@ interface IModalData {
 
 @Component({
   selector: 'nz-demo-modal-service',
+  standalone: true,
+  imports: [NzButtonModule, NzModalModule],
   template: `
     <button nz-button nzType="primary" (click)="createModal()">
       <span>String</span>
@@ -183,6 +186,8 @@ export class NzDemoModalServiceComponent {
 
 @Component({
   selector: 'nz-modal-custom-component',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <div>
       <h2>{{ title }}</h2>