refactor(module:experimental-image,resizable,graph,pipes): migrate de…

…mo to standalone mode (#8822) * refactor(module:experimental-image): migrate demo to standalone mode * refactor(module:resizable): migrate demo to standalone mode * refactor(module:pipes): migrate demo to standalone mode * refactor(module:graph): migrate demo to standalone mode
NG-ZORRO · Oct 22, 2024 · c66e6e0 · c66e6e0
1 parent 595c43d
commit c66e6e0
Show file tree

Hide file tree

Showing 24 changed files with 101 additions and 75 deletions.
diff --git a/components/experimental-image/demo/auto-srcset.ts b/components/experimental-image/demo/auto-srcset.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { createAliObjectsLoader } from 'ng-zorro-antd/experimental/image';
+import { createAliObjectsLoader, NzImageModule } from 'ng-zorro-antd/experimental/image';
 
 @Component({
   selector: 'nz-demo-experimental-image-auto-srcset',
+  standalone: true,
+  imports: [NzImageModule],
   template: `<nz-image [nzSrc]="src" nzWidth="200" nzHeight="200" [nzSrcLoader]="loader" nzAutoSrcset></nz-image>`
 })
 export class NzDemoExperimentalImageAutoSrcsetComponent {

diff --git a/components/experimental-image/demo/module b/components/experimental-image/demo/module
diff --git a/components/experimental-image/demo/preloading.ts b/components/experimental-image/demo/preloading.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzImageModule } from 'ng-zorro-antd/experimental/image';
+
 @Component({
   selector: 'nz-demo-experimental-image-preloading',
+  standalone: true,
+  imports: [NzImageModule],
   template: `<nz-image [nzSrc]="src" nzWidth="200" nzHeight="200" nzPriority></nz-image>`
 })
 export class NzDemoExperimentalImagePreloadingComponent {

diff --git a/components/experimental-image/demo/src-loader.ts b/components/experimental-image/demo/src-loader.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { createAliObjectsLoader } from 'ng-zorro-antd/experimental/image';
+import { createAliObjectsLoader, NzImageModule } from 'ng-zorro-antd/experimental/image';
 
 @Component({
   selector: 'nz-demo-experimental-image-src-loader',
+  standalone: true,
+  imports: [NzImageModule],
   template: `<nz-image [nzSrc]="src" nzWidth="200" nzHeight="200" [nzSrcLoader]="loader"></nz-image>`
 })
 export class NzDemoExperimentalImageSrcLoaderComponent {

diff --git a/components/graph/demo/customized.ts b/components/graph/demo/customized.ts
@@ -1,15 +1,21 @@
 import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import {
   NzGraphComponent,
   NzGraphData,
   NzGraphDataDef,
+  NzGraphModule,
   NzGraphZoomDirective,
   NzRankDirection
 } from 'ng-zorro-antd/graph';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-graph-customized',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzGraphModule, NzRadioModule],
   template: `
     <button nz-button nzType="default" (click)="expandAll()">ExpandAll</button>
     <button nz-button nzType="default" (click)="collapseAll()">CollapseAll</button>

diff --git a/components/graph/demo/module b/components/graph/demo/module
diff --git a/components/pipes/demo/aggregate.ts b/components/pipes/demo/aggregate.ts
@@ -1,20 +1,26 @@
 import { Component } from '@angular/core';
 
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzAggregatePipe } from 'ng-zorro-antd/pipes';
+import { NzStatisticModule } from 'ng-zorro-antd/statistic';
+
 @Component({
   selector: 'nz-demo-pipes-aggregate',
+  standalone: true,
+  imports: [NzGridModule, NzStatisticModule, NzAggregatePipe],
   template: `
     <nz-row [nzGutter]="16">
       <nz-col [nzSpan]="6">
-        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'max'" [nzTitle]="'Max [7, 8, 2, 3]'"></nz-statistic>
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'max'" nzTitle="Max [7, 8, 2, 3]"></nz-statistic>
       </nz-col>
       <nz-col [nzSpan]="6">
-        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'min'" [nzTitle]="'Min [7, 8, 2, 3]'"></nz-statistic>
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'min'" nzTitle="Min [7, 8, 2, 3]"></nz-statistic>
       </nz-col>
       <nz-col [nzSpan]="6">
-        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'sum'" [nzTitle]="'Sum [7, 8, 2, 3]'"></nz-statistic>
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'sum'" nzTitle="Sum [7, 8, 2, 3]"></nz-statistic>
       </nz-col>
       <nz-col [nzSpan]="6">
-        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'avg'" [nzTitle]="'Avg [7, 8, 2, 3]'"></nz-statistic>
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'avg'" nzTitle="Avg [7, 8, 2, 3]"></nz-statistic>
       </nz-col>
     </nz-row>
   `

diff --git a/components/pipes/demo/bytes.ts b/components/pipes/demo/bytes.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBytesPipe } from 'ng-zorro-antd/pipes';
+
 @Component({
   selector: 'nz-demo-pipes-bytes',
+  standalone: true,
+  imports: [NzBytesPipe],
   template: `
     <ul>
       <li>{{ 200 | nzBytes }}</li>

diff --git a/components/pipes/demo/css-unit.ts b/components/pipes/demo/css-unit.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzToCssUnitPipe } from 'ng-zorro-antd/pipes';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
 
 @Component({
   selector: 'nz-demo-pipes-css-unit',
+  standalone: true,
+  imports: [FormsModule, NzSliderModule, NzToCssUnitPipe],
   template: `
     <nz-slider [(ngModel)]="radiusValue" [nzMax]="100" [nzMin]="0"></nz-slider>
 

diff --git a/components/pipes/demo/ellipsis.ts b/components/pipes/demo/ellipsis.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzEllipsisPipe } from 'ng-zorro-antd/pipes';
 
 @Component({
   selector: 'nz-demo-pipes-ellipsis',
+  standalone: true,
+  imports: [FormsModule, NzInputModule, NzEllipsisPipe],
   template: `
     <input type="text" nz-input [(ngModel)]="str" />
     <br />

diff --git a/components/pipes/demo/module b/components/pipes/demo/module
diff --git a/components/pipes/demo/safe-null.ts b/components/pipes/demo/safe-null.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzSafeNullPipe } from 'ng-zorro-antd/pipes';
+import { NzTableModule } from 'ng-zorro-antd/table';
+
 @Component({
   selector: 'nz-demo-pipes-safe-null',
+  standalone: true,
+  imports: [NzTableModule, NzSafeNullPipe],
   template: `
     <nz-table #basicTable [nzData]="listOfData">
       <thead>
@@ -16,7 +21,7 @@ import { Component } from '@angular/core';
           <tr>
             <td>{{ data.name }}</td>
             <td>{{ data.age }}</td>
-            <td>{{ data.address | nzSafeNull: '-' }}</td>
+            <td>{{ data?.['address'] | nzSafeNull: '-' }}</td>
           </tr>
         }
       </tbody>

diff --git a/components/pipes/demo/sanitizer.ts b/components/pipes/demo/sanitizer.ts
@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzSanitizerPipe } from 'ng-zorro-antd/pipes';
+
 @Component({
   selector: 'nz-demo-pipes-sanitizer',
-  template: ` <div [innerHTML]="html | nzSanitizer: 'html'"></div> `
+  standalone: true,
+  imports: [NzSanitizerPipe],
+  template: `<div [innerHTML]="html | nzSanitizer: 'html'"></div>`
 })
 export class NzDemoPipesSanitizerComponent {
   html = `<span>I am <code>innerHTML</code></span>`;

diff --git a/components/pipes/demo/trim.ts b/components/pipes/demo/trim.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzTrimPipe } from 'ng-zorro-antd/pipes';
 
 @Component({
   selector: 'nz-demo-pipes-trim',
+  standalone: true,
+  imports: [FormsModule, NzInputModule, NzTrimPipe],
   template: `
     <input type="text" nz-input [(ngModel)]="str" />
     <br />

diff --git a/components/resizable/demo/basic.ts b/components/resizable/demo/basic.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { NzResizeDirection, NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizableModule, NzResizeDirection, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-basic',
+  standalone: true,
+  imports: [NzResizableModule],
   template: `
     <div
       class="box"

diff --git a/components/resizable/demo/customize.ts b/components/resizable/demo/customize.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-customize',
+  standalone: true,
+  imports: [NzIconModule, NzResizableModule],
   template: `
     <div class="box" nz-resizable (nzResize)="onResize($event)" [style.height.px]="height" [style.width.px]="width">
       content

diff --git a/components/resizable/demo/drawer.ts b/components/resizable/demo/drawer.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-drawer',
+  standalone: true,
+  imports: [NzButtonModule, NzDrawerModule, NzResizableModule],
   template: `
     <button nz-button nzType="primary" (click)="open()">Open</button>
     <nz-drawer

diff --git a/components/resizable/demo/grid.ts b/components/resizable/demo/grid.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent, NzResizeHandleOption } from 'ng-zorro-antd/resizable';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzResizableModule, NzResizeEvent, NzResizeHandleOption } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-grid',
+  standalone: true,
+  imports: [NzGridModule, NzResizableModule],
   template: `
     <div nz-row>
       <div

diff --git a/components/resizable/demo/layout.ts b/components/resizable/demo/layout.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-layout',
+  standalone: true,
+  imports: [NzLayoutModule, NzResizableModule],
   template: `
     <nz-layout>
       <nz-header>Header</nz-header>

diff --git a/components/resizable/demo/lock-aspect-ratio.ts b/components/resizable/demo/lock-aspect-ratio.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-lock-aspect-ratio',
+  standalone: true,
+  imports: [NzResizableModule],
   template: `
     <div
       class="box"

diff --git a/components/resizable/demo/module b/components/resizable/demo/module
diff --git a/components/resizable/demo/preview.ts b/components/resizable/demo/preview.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-preview',
+  standalone: true,
+  imports: [NzResizableModule],
   template: `
     <div
       class="box"

diff --git a/components/resizable/demo/table.ts b/components/resizable/demo/table.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzTableModule } from 'ng-zorro-antd/table';
 
 @Component({
   selector: 'nz-demo-resizable-table',
+  standalone: true,
+  imports: [NzResizableModule, NzTableModule],
   template: `
     <nz-table #basicTable [nzData]="listOfData">
       <thead>