Statistic

Display statistic number.

When To Use#

  • When want to highlight some data.
  • When want to display statistic data with description.
import { NzStatisticModule } from 'ng-zorro-antd/statistic';

Examples

Active Users
1,949,101
Account Balance (CNY)
2,019.11
Active Users

Simplest Usage.

expand codeexpand code
Loading...
Active
11.28%
Idle
9.3%

Display statistic data in Card.

expand codeexpand code
Loading...
Feedback
1,128
Unmerged
93/ 100

Add unit through nzPrefix and nzSuffix.

expand codeexpand code
Loading...
Countdown
00:00:00
Million Seconds
00:00:00:000
Day Level
0 天 0 时 0 分 0 秒

Countdown component.

expand codeexpand code
Loading...

API#

nz-statistic#

PropertyDescriptionTypeDefault
[nzPrefix]Prefix of Valuestring | TemplateRef<void>-
[nzSuffix]Suffix of Valuestring | TemplateRef<void>-
[nzTitle]Titlestring | TemplateRef<void>-
[nzValue]Valuestring | number-
[nzValueStyle]Value CSS styleObject-
[nzValueTemplate]Custom template to render a numberTemplateRef<{ $implicit: string | number }>-
[nzLoading]Loading status of Statisticbooleanfalse

nz-countdown#

PropertyDescriptionTypeDefault
[nzFormat]Format stringstring"HH:mm:ss"
[nzPrefix]Prefix of Valuestring | TemplateRef<void>-
[nzSuffix]Suffix of Valuestring | TemplateRef<void>-
[nzTitle]Titlestring | TemplateRef<void>-
[nzValue]Target time in timestamp formstring | number-
[nzValueTemplate]Custom template to render a timeTemplateRef<{ $implicit: number }>-
(nzCountdownFinish)Emit when countdown finishesvoid-

nzFormat#

TokenDescription
YYear
MMonth
DDate
HHour
mMinute
sSecond
SMillisecond