feat(module:statistics): support standalone component (#8216)

NG-ZORRO · Dec 1, 2023 · 186ef60 · 186ef60
1 parent a84ddef
commit 186ef60
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 72 deletions.
diff --git a/components/statistic/countdown.component.ts b/components/statistic/countdown.component.ts
@@ -22,6 +22,8 @@ import {
 } from '@angular/core';
 import { interval, Subscription } from 'rxjs';
 
+import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
+
 import { NzStatisticComponent } from './statistic.component';
 
 const REFRESH_INTERVAL = 1000 / 30;
@@ -42,7 +44,9 @@ const REFRESH_INTERVAL = 1000 / 30;
     ></nz-statistic>
 
     <ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>
-  `
+  `,
+  imports: [NzStatisticComponent, NzPipesModule],
+  standalone: true
 })
 export class NzCountdownComponent extends NzStatisticComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nzFormat: string = 'HH:mm:ss';

diff --git a/components/statistic/doc/index.en-US.md b/components/statistic/doc/index.en-US.md
@@ -18,37 +18,37 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 
 ## API
 
-### nz-statistic
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzPrefix]` | Prefix of Value | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | Suffix of Value | `string \| TemplateRef<void>` | - |
-| `[nzTitle]` | Title | `string \| TemplateRef<void>` | - |
-| `[nzValue]` | Value | `string \| number` | - |
-| `[nzValueStyle]` | Value CSS style | `Object` | - |
-| `[nzValueTemplate]` | Custom template to render a number | `TemplateRef<{ $implicit: string \| number }>` | - |
-
-### nz-countdown
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzFormat]` | Format string  | `string` | `"HH:mm:ss"` |
-| `[nzPrefix]` | Prefix of Value | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | Suffix of Value | `string \| TemplateRef<void>` | - |
-| `[nzTitle]` | Title | `string \| TemplateRef<void>` | - |
-| `[nzValue]` | Target time in timestamp form | `string \| number` | - |
-| `[nzValueTemplate]` | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | - |
-| `(nzCountdownFinish)` | Emit when countdown finishes | `void` | - |
+### nz-statistic:standalone
+
+| Property            | Description                        | Type                                           | Default |
+| ------------------- | ---------------------------------- | ---------------------------------------------- | ------- |
+| `[nzPrefix]`        | Prefix of Value                    | `string \| TemplateRef<void>`                  | -       |
+| `[nzSuffix]`        | Suffix of Value                    | `string \| TemplateRef<void>`                  | -       |
+| `[nzTitle]`         | Title                              | `string \| TemplateRef<void>`                  | -       |
+| `[nzValue]`         | Value                              | `string \| number`                             | -       |
+| `[nzValueStyle]`    | Value CSS style                    | `Object`                                       | -       |
+| `[nzValueTemplate]` | Custom template to render a number | `TemplateRef<{ $implicit: string \| number }>` | -       |
+
+### nz-countdown:standalone
+
+| Property              | Description                      | Type                                 | Default      |
+| --------------------- | -------------------------------- | ------------------------------------ | ------------ |
+| `[nzFormat]`          | Format string                    | `string`                             | `"HH:mm:ss"` |
+| `[nzPrefix]`          | Prefix of Value                  | `string \| TemplateRef<void>`        | -            |
+| `[nzSuffix]`          | Suffix of Value                  | `string \| TemplateRef<void>`        | -            |
+| `[nzTitle]`           | Title                            | `string \| TemplateRef<void>`        | -            |
+| `[nzValue]`           | Target time in timestamp form    | `string \| number`                   | -            |
+| `[nzValueTemplate]`   | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | -            |
+| `(nzCountdownFinish)` | Emit when countdown finishes     | `void`                               | -            |
 
 ### nzFormat
 
 | Token | Description |
-| -------- | ----------- |
-| `Y` | Year |
-| `M` | Month |
-| `D` | Date |
-| `H` | Hour |
-| `m` | Minute |
-| `s` | Second |
-| `S` | Millisecond |
+| ----- | ----------- |
+| `Y`   | Year        |
+| `M`   | Month       |
+| `D`   | Date        |
+| `H`   | Hour        |
+| `m`   | Minute      |
+| `s`   | Second      |
+| `S`   | Millisecond |
diff --git a/components/statistic/doc/index.zh-CN.md b/components/statistic/doc/index.zh-CN.md
@@ -19,37 +19,37 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
 
 ## API
 
-### nz-statistic
-
-| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ----------- | ---- | ------- |
-| `[nzPrefix]` | 设置数值的前缀 | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | 设置数值的后缀 | `string \| TemplateRef<void>` | - |
-| `[nzTitle]` | 数值的标题 | `string \| TemplateRef<void>` | - |
-| `[nzValue]` | 数值内容 | `string \| number` | - |
-| `[nzValueStyle]` | 设置数值的样式 | `Object` | - |
-| `[nzValueTemplate]` | 自定义数值展示 | `TemplateRef<{ $implicit: string \| number }>` | - |
-
-### nz-countdown
-
-| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ----------- | ---- | ------- |
-| `[nzFormat]` | 格式化倒计时展示 | `string` | `"HH:mm:ss"` |
-| `[nzPrefix]` | 设置数值的前缀 | `string \| TemplateRef<void>` | - |
-| `[nzSuffix]` | 设置数值的后缀 | `string \| TemplateRef<void>` | - |
-| `[nzTitle]` | 数值的标题 | `string \| TemplateRef<void>` | - |
-| `[nzValue]` | 时间戳格式的目标时间 | `string \| number` | - |
-| `[nzValueTemplate]` | 自定义时间展示 | `TemplateRef<{ $implicit: number }>` | - |
-| `(nzCountdownFinish)` | 当倒计时完成时发出事件 | `void` | - |
+### nz-statistic:standalone
+
+| 参数                | 说明           | 类型                                           | 默认值 |
+| ------------------- | -------------- | ---------------------------------------------- | ------ |
+| `[nzPrefix]`        | 设置数值的前缀 | `string \| TemplateRef<void>`                  | -      |
+| `[nzSuffix]`        | 设置数值的后缀 | `string \| TemplateRef<void>`                  | -      |
+| `[nzTitle]`         | 数值的标题     | `string \| TemplateRef<void>`                  | -      |
+| `[nzValue]`         | 数值内容       | `string \| number`                             | -      |
+| `[nzValueStyle]`    | 设置数值的样式 | `Object`                                       | -      |
+| `[nzValueTemplate]` | 自定义数值展示 | `TemplateRef<{ $implicit: string \| number }>` | -      |
+
+### nz-countdown:standalone
+
+| 参数                  | 说明                   | 类型                                 | 默认值       |
+| --------------------- | ---------------------- | ------------------------------------ | ------------ |
+| `[nzFormat]`          | 格式化倒计时展示       | `string`                             | `"HH:mm:ss"` |
+| `[nzPrefix]`          | 设置数值的前缀         | `string \| TemplateRef<void>`        | -            |
+| `[nzSuffix]`          | 设置数值的后缀         | `string \| TemplateRef<void>`        | -            |
+| `[nzTitle]`           | 数值的标题             | `string \| TemplateRef<void>`        | -            |
+| `[nzValue]`           | 时间戳格式的目标时间   | `string \| number`                   | -            |
+| `[nzValueTemplate]`   | 自定义时间展示         | `TemplateRef<{ $implicit: number }>` | -            |
+| `(nzCountdownFinish)` | 当倒计时完成时发出事件 | `void`                               | -            |
 
 ### nzFormat
 
 | 占位符 | 描述 |
-| -------- | ----------- |
-| `Y` | 年 |
-| `M` | 月 |
-| `D` | 日 |
-| `H` | 时 |
-| `m` | 分 |
-| `s` | 秒 |
-| `S` | 毫秒 |
+| ------ | ---- |
+| `Y`    | 年   |
+| `M`    | 月   |
+| `D`    | 日   |
+| `H`    | 时   |
+| `m`    | 分   |
+| `s`    | 秒   |
+| `S`    | 毫秒 |
diff --git a/components/statistic/statistic-number.component.ts b/components/statistic/statistic-number.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
+import { getLocaleNumberSymbol, NgIf, NgTemplateOutlet, NumberSymbol } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -35,7 +35,9 @@ import { NzStatisticValueType } from './typings';
         <span *ngIf="displayDecimal" class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
       </ng-container>
     </span>
-  `
+  `,
+  imports: [NgIf, NgTemplateOutlet],
+  standalone: true
 })
 export class NzStatisticNumberComponent implements OnChanges {
   @Input() nzValue?: NzStatisticValueType;

diff --git a/components/statistic/statistic.component.ts b/components/statistic/statistic.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgIf, NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -18,8 +19,10 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NgStyleInterface } from 'ng-zorro-antd/core/types';
 
+import { NzStatisticNumberComponent } from './statistic-number.component';
 import { NzStatisticValueType } from './typings';
 
 @Component({
@@ -44,7 +47,9 @@ import { NzStatisticValueType } from './typings';
   host: {
     class: 'ant-statistic',
     '[class.ant-statistic-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [NzStatisticNumberComponent, NgIf, NzOutletModule, NgStyle],
+  standalone: true
 })
 export class NzStatisticComponent implements OnDestroy, OnInit {
   @Input() nzPrefix?: string | TemplateRef<void>;

diff --git a/components/statistic/statistic.module.ts b/components/statistic/statistic.module.ts
@@ -3,21 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzPipesModule as NzPipesModuleFromCore } from 'ng-zorro-antd/core/pipe';
-
 import { NzCountdownComponent } from './countdown.component';
 import { NzStatisticNumberComponent } from './statistic-number.component';
 import { NzStatisticComponent } from './statistic.component';
 
 @NgModule({
-  imports: [BidiModule, CommonModule, PlatformModule, NzOutletModule, NzPipesModuleFromCore],
-  declarations: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
+  imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
   exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent]
 })
 export class NzStatisticModule {}