refactor(module:image): migrate demo to standalone mode (#8745)

NG-ZORRO · Sep 12, 2024 · b382b58 · b382b58
1 parent 66f0a04
commit b382b58
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 37 deletions.
diff --git a/components/image/demo/basic.ts b/components/image/demo/basic.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzImageModule } from 'ng-zorro-antd/image';
+
 @Component({
   selector: 'nz-demo-image-basic',
+  standalone: true,
+  imports: [NzImageModule],
   template: `
     <img
       nz-image

diff --git a/components/image/demo/controlled-preview.ts b/components/image/demo/controlled-preview.ts
@@ -1,9 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NzImageService } from 'ng-zorro-antd/image';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzImageModule, NzImageService } from 'ng-zorro-antd/image';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 
 @Component({
   selector: 'nz-demo-image-controlled-preview',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzImageModule, NzInputNumberModule],
   template: `
     <div>
       <label>
@@ -32,17 +37,16 @@ import { NzImageService } from 'ng-zorro-antd/image';
   ]
 })
 export class NzDemoImageControlledPreviewComponent {
-  scaleStep: number = 0.5;
-
-  constructor(private nzImageService: NzImageService) {}
+  private nzImageService = inject(NzImageService);
+  scaleStep = 0.5;
+  readonly images = [
+    {
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      alt: ''
+    }
+  ];
 
   onClick(): void {
-    const images = [
-      {
-        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        alt: ''
-      }
-    ];
-    this.nzImageService.preview(images, { nzZoom: 1, nzRotate: 0, nzScaleStep: this.scaleStep });
+    this.nzImageService.preview(this.images, { nzZoom: 1, nzRotate: 0, nzScaleStep: this.scaleStep });
   }
 }
diff --git a/components/image/demo/fallback.ts b/components/image/demo/fallback.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzImageModule } from 'ng-zorro-antd/image';
+
 @Component({
   selector: 'nz-demo-image-fallback',
+  standalone: true,
+  imports: [NzImageModule],
   template: ` <img nz-image width="200px" height="200px" nzSrc="error" [nzFallback]="fallback" alt="" /> `
 })
 export class NzDemoImageFallbackComponent {

diff --git a/components/image/demo/module b/components/image/demo/module
diff --git a/components/image/demo/placeholder.ts b/components/image/demo/placeholder.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzImageModule } from 'ng-zorro-antd/image';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
 @Component({
   selector: 'nz-demo-image-placeholder',
+  standalone: true,
+  imports: [NzButtonModule, NzImageModule, NzSpaceModule],
   template: `
     <nz-space [nzSize]="12">
       <img *nzSpaceItem nz-image width="200px" height="200px" [nzSrc]="src" [nzPlaceholder]="placeholder" />

diff --git a/components/image/demo/preview-group.ts b/components/image/demo/preview-group.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzImageModule } from 'ng-zorro-antd/image';
+
 @Component({
   selector: 'nz-demo-image-preview-group',
+  standalone: true,
+  imports: [NzImageModule],
   template: `
     <nz-image-group>
       <img nz-image width="200px" nzSrc="https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg" alt="" />

diff --git a/components/image/demo/service.ts b/components/image/demo/service.ts
@@ -1,29 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 
-import { NzImageService } from 'ng-zorro-antd/image';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzImageModule, NzImageService } from 'ng-zorro-antd/image';
 
 @Component({
   selector: 'nz-demo-image-service',
-  template: ` <button nz-button nzType="primary" (click)="onClick()">Preview</button> `
+  standalone: true,
+  imports: [NzButtonModule, NzImageModule],
+  template: `<button nz-button nzType="primary" (click)="onClick()">Preview</button>`
 })
 export class NzDemoImageServiceComponent {
-  constructor(private nzImageService: NzImageService) {}
+  private nzImageService = inject(NzImageService);
+  readonly images = [
+    {
+      src: 'https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg',
+      width: '200px',
+      height: '200px',
+      alt: 'ng-zorro'
+    },
+    {
+      src: 'https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg',
+      width: '200px',
+      height: '200px',
+      alt: 'angular'
+    }
+  ];
 
   onClick(): void {
-    const images = [
-      {
-        src: 'https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg',
-        width: '200px',
-        height: '200px',
-        alt: 'ng-zorro'
-      },
-      {
-        src: 'https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg',
-        width: '200px',
-        height: '200px',
-        alt: 'angular'
-      }
-    ];
-    this.nzImageService.preview(images, { nzZoom: 1.5, nzRotate: 0 });
+    this.nzImageService.preview(this.images, { nzZoom: 1.5, nzRotate: 0 });
   }
 }