Package Exports

angular4-counter-up

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular4-counter-up) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular4-counter-up

本组件适用于 Angular2 及以上版本。

Installation

通过 NPM 安装 angular4-counter-up

npm install angular4-counter-up --save

导入 CounterUpModule 模块到项目的 app.module.ts

import { CounterUpModule } from 'angular4-counter-up';
@NgModule({
  imports: [ CounterUpModule.forRoot() ]
})

Usage

在你的项目模板的需要使用该组建的HTML代码中加入 counter-up 属性：

<span counter-up offset="1" number="1000">0</span>

为了简化HTML，你可以在 CounterUpModule 中进行全局配置

import { CounterUpModule } from 'angular4-counter-up';
@NgModule({
  imports: [ CounterUpModule.forRoot({
    delay: 1000,
    time: 100
  }) ]
})

Module Options & Attributes( Input )

模块支持的属性

delay: 10, // 内容每次跳变的时间间隔 ( 单位：毫秒 )
time: 100, // 内容最大跳变次数 ( 默认根据该值计算每次跳变的增值 )
beginAt: 0, // 默认的起始数值

组件支持的属性

number: 1000, // 内容跳变的终止 ( 必须参数，根据该参数决定内容显示格式：普通数值 / 时间 / 逗号千分数值 )
offset: 1, // 内容跳变增值 ( 如不传递，会自动根据 module 的 time 和 number 计算跳变增值 )
formatter: '%s', // 数值显示格式 ( %s 为占位符，例如：EUR $s )

Callbacks( Output )

回调支持

complete: 当内容跳变为终值时触发

应用回调用举例：

<span counter-up number="10" (complete)="log($event)">9</span>

Feedback

Please leave your feedback if you have noticed any issues or have a feature request.

License

The repository code is open-sourced software licensed under the MIT license.