inorganik / ngx-countup Goto Github PK
View Code? Open in Web Editor NEWAnimates a numerical value by counting to it - for Angular
License: MIT License
Animates a numerical value by counting to it - for Angular
License: MIT License
[ ] Bug
[ ] Build issue
[x] Feature request
Angular: 5.2.0
Angular CLI: 1.7.2
countup.js-angular2: 1.1.1
I'm currently needing to count up a percentage, which can be achieved through suffix
.
Basically counting up from 0.00% to 100.00%
This can be set through the options. However these options are missing in the module. Can this be added? I would do a pull request, if that is ok.
Issue description
running npm install
throws the following warning:
npm WARN [email protected] requires a peer of @angular/common@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
Steps to reproduce and a minimal demo of the problem
npm install
with Angular 8
Current behavior
npm install
shows a couple of warning due to peer dependencies.
Expected/desired behavior
No warnings should be shown
How to Alert on complete?
Hi, I am trying to call the animation when the element is scrolled to or is visible in the viewport. Is there any way to achieve this?
[ ] Bug
[ ] Build issue
[X ] Feature request
Angular: 5
Angular CLI: Ionic based 3.9.2
countup.js-angular2: 6.0.0
Thanks for this great plugin. It really helps in creating a delightful user experience. I was hoping we could get a feature where the animation doesnt happen on first load? I have a couter for my basketball game that adds/subtracts 10 at a go. On the first load I don't want it to animate though, I only want it to animate when it actually changes.
<span countUp [endVal]="baskets" duration="0.450">{{baskets}}</span>
how to use angular4
Hi!
First of all, thanks for your code!
I believe that an animate callback would be useful.
Think about it ;)
Thanks again!
PD: Sorry for my english ;)
I saw the angular2 demo.
hmm, it has the function to add the special character like +
, -
, and others.
but it was not shown in the code.
so i'd like to get that function(adding special character).
please suggest your ideas.
Angular:
Angular CLI:
countup.js-angular2:
Currently every animation step triggers an angular change detection (which leads to animation stutter on mobile).
This could be prevented with the following patch:
constructor(private el: ElementRef,
private zone: NgZone) {
}
private animate() {
this.zone.runOutsideAngular(() => {
this.countUp.reset();
this.countUp.start(() => {
this.zone.run(() => {
this.complete.emit();
});
});
});
}
see also: https://angular.io/api/core/NgZone
[Feature request]
[ ] Bug
[ ] Build issue
[ ] Feature request
Angular 15
Angular:
Angular CLI:
ngx-countup:
Can you build angular 15 compability version.
I saw this in another version of your library (using spy) and I was wondering if this is also possible for the angular 2 wrapper?
[x] Bug
[ ] Build issue
[ ] Feature request
Angular: 7.0.0
Angular CLI: 7.0.1
countup.js-angular2: ^6.0.1
ng serve
on Angular 7 fails due to:
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/countup.js-angular2/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
[ X ] Bug
[ ] Build issue
[ ] Feature request
Angular: 13.3.11
Angular CLI: 13.3.11
ngx-countup: 13.1.0
endVal
and options
cannot be simultaneously.
useOptions()
function to include an update to endVal
.useOptions()
.Detailed discussions here.
The reason is because in the directive, there's an if/else statement in ngOnChanges, making it so it's an either/or situation.
[x ] Bug
[ ] Build issue
[ ] Feature request
7.3.2
Angular:
Angular CLI: 10.0.5
ngx-countup: 7.3.2
I get a build error on ng build --prod:
ERROR in The target entry-point "ngx-countup" has missing dependencies:
- countup.js/dist/countup.umd.js
[ ] Bug
[X ] Build issue
[ ] Feature request
Angular: 7.0.0
Angular CLI: 9.x
ngx-countup: ^7.3.0
I'm currently trying to build my app and because I'm using NGX-countup, I have issues with building and get the following output. I have little insight into what the dependancies for ngx-countup are, but I would like to help get this fixed if possible. (inherited project...) Currently only happening when using the --prod
flag with ng build
ERROR in ./node_modules/ngx-countup/fesm5/ngx-countup.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
at checkNodeForDecorators (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
at visitNodes (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16144:30)
at Object.forEachChild (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16370:24)
at checkNodeForDecorators (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
at Object.forEachChild (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16265:21)
at checkNodeForDecorators (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
at Object.forEachChild (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16322:24)
at checkNodeForDecorators (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
at Object.forEachChild (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16333:24)
at checkNodeForDecorators (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
at Object.forEachChild (/Users/christopherrutherford/dev/mhp-proper/ui/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16229:21)
[+] Bug
[ ] Build issue
[ ] Feature request
Angular: 10.0.1
Angular CLI: 10.0.1
ngx-countup: 7.3.1
Bugs:
Solutions:
this.countUp.frameVal
).this.countUp.pauseResume();
).[ ] Bug
[ ] Build issue
[x] Feature request
Angular: 13.0.2
Angular CLI: 13.0.3
ngx-countup: ^7.3.3
When compiling with Angular 13, it shows the following message. The library seems to work fine.
⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:
- ngx-countup [es2015/esm2015] (git+https://github.com/inorganik/ngx-countUp.git)
Encourage the library authors to publish an Ivy distribution.
Thanks for your work
[x] Bug
[ ] Build issue
[ ] Feature request
Angular:5.2.11
Angular CLI:6.0.8
countup.js-angular2: 6.0.1
error info:
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare
block-scoped variable 'ngDevMode'.
node_modules/countup.js-angular2/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error
TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
this project have node_module/countup.js-angular2/node_modules/@angular/core, but I project have node_modules/@angular/core. so I remove the node_module/countup.js-angular2/node_modules/** fix this issue.
[x] Bug
[ ] Build issue
[ ] Feature request
Angular: 5.2.10
Angular CLI: 6.0.7
countup.js-angular2: 6.0.0
Hi @inorganik,
I am having an issue when endVal is greater than 999 (looks like it is related to #9 )
When the value is greater than 999, it goes up to 100 more, then down to endVal.
Example:
Here is the code I have used :
<span [endVal]="1100">0</span>
I am expecting it to stop exactly at the provided value.
Thanks.
[ x ] Bug
[ ] Build issue
[ ] Feature request
"@angular/animations": "~9.0.2",
"@angular/common": "~9.0.2",
"@angular/compiler": "~9.0.2",
"@angular/core": "~9.0.2",
"@angular/forms": "~9.0.2",
"@angular/platform-browser": "~9.0.2",
"@angular/platform-browser-dynamic": "~9.0.2",
"@angular/router": "~9.0.2",
"countup.js-angular2": "^7.3.0",
"ngx-countup": "^7.3.0",
"ngx-scrollspy": "^1.2.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
Angular: "@angular-devkit/build-angular": "~0.900.7",
Angular CLI: "~9.0.3",
"ngx-countup": "^7.3.0",
Hi, i am trying to bind to endVal but for some reason it throws this error : Can't bind to 'endVal' since it isn't a known property of 'div'.ng
<div class="value" [countUp]="options" [endVal]="d.displayValue"></div>
Thanks!
Module build failed: Error: C:\XXX\node_modules\countup.js-angular2\countUp.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include'
property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
[x] Bug
[ ] Build issue
[ ] Feature request
Angular: 5
Angular CLI:
countup.js-angular2:
Hi @inorganik ,
when start value and end value both greater than 999, the component become count down, not count up expected.
for example
start value is 100000
end value is 100099
I think the issue caused by this code.
if (end > 999) {
// make easing smoother for large numbers
countUp = new CountUp(this.el.nativeElement, sta, end - 100, dec, dur / 2, this.options);
}
Please have a look.
Thanks.
Hi, almost sure it's the same issue: inorganik/countUp.js#154
WARNING in ./node_modules/countup.js-angular2/dist/countUp.module.js
15:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
at CommonJsRequireContextDependency.getWarnings (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\dependencies\CommonJsRequireContextDependency.js:27:4)
at Compilation.reportDependencyErrorsAndWarnings (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\Compilation.js:677:24)
at Compilation.finish (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\Compilation.js:535:9)
at applyPluginsParallel.err (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\Compiler.js:512:17)
at C:\xampp\htdocs\proyectos\my-project\panel\node_modules\tapable\lib\Tapable.js:289:11
at _addModuleChain (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\Compilation.js:481:11)
at processModuleDependencies.err (C:\xampp\htdocs\proyectos\my-project\panel\node_modules\webpack\lib\Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
webpack: Compiled with warnings.
I'm currently working under Angular 4.3.6 / TS 2.4.0, haven't tried with previous versions
@angular/cli: 1.3.2
node: 6.11.0
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/upgrade: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
thanks in advance.
[ ] Bug
[X] Build issue
[ ] Feature request
Version 6.0.1
Angular:
Ionic-angular 3.9.2
Angular CLI:
countup.js-angular2:
For some reason while building I get this error. I'm not sure what it means. It only happens when the --prod
flag is passed on for AoT compilation.
Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are
not supported. Consider replacing the function or lambda with a reference to an exported function, resolving
symbol NgModule in
/Users/user/Desktop/app/node_modules/countup.js-angular2/node_modules/@angular/core/core.d.ts,
resolving symbol CountUpModule in
/Users/user/Desktop/app/node_modules/countup.js-angular2/countup.js-angular2.d.ts, resolving
symbol CountUpModule in
/Users/user/Desktop/app/node_modules/countup.js-angular2/countup.js-angular2.d.ts
I checked with the last build before the Angular 6 builds, and that one, version 1.1.1 works fine.
I believe ionic-angular 3.9.2 uses Angular 5.0 (just looking at the other threads). The usage is exactly as specified in the readme
[ *] Bug
[ ] Build issue
[ ] Feature request
Angular: 8.2.14
Angular CLI: 8.3.23
ngx-countup: "^7.3.0"
On server side, when I try to render or prerender a page that include CountUpModule, I got this error:
exec error node dist/prerender: Error: Command failed: node dist/prerender
D:\angular\node_modules\countup.js\dist\countUp.min.js:1
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.4",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endV
SyntaxError: Unexpected token 'export'
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at D:\angular\node_modules\ngx-countup\bundles\ngx-countup.umd.js:2:111
at Object. (D:\angular\node_modules\ngx-countup\bundles\ngx-countup.umd.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
Currently, when trying to upgrade to angular 10, it throws this error:
Package "countup.js-angular2" has an incompatible peer dependency to "@angular/core" (requires "^7.0.0 || ^8.0.0" (extended), would install "10.0.0").
Package "countup.js-angular2" has an incompatible peer dependency to "@angular/common" (requires "^7.0.0 || ^8.0.0" (extended), would install "10.0.0").
✖ Migration failed: Incompatible peer dependencies found.
Can you update it please?
I don't need the comma separation number increment .if the digits is 100000 it is increment without commas .How to remove the comma from the number
[ ] Bug
[X] Build issue
[ ] Feature request
Angular:
Angular CLI: 6.0.3
countup.js-angular2: 6.0.0
Just updated to new version to get rid of previous packaging errors but it seems this one has its own issue.
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/countup.js-angular2/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
I removed node_modules from countup.js-angular2 folder and it's okay now. Anyway, you better check it out.
[ ] Bug
[ ] Build issue
[ ] Feature request
Angular:
Angular CLI:
ngx-countup:
Hello we are using latest version of this package
and angular 16 version
and we face error like
[x] Bug
[ ] Build issue
[ ] Feature request
ng --version
Angular CLI: 8.3.4
Node: 10.15.0
OS: darwin x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.803.4
@angular-devkit/build-angular 0.803.4
@angular-devkit/build-optimizer 0.803.4
@angular-devkit/build-webpack 0.803.4
@angular-devkit/core 8.3.4
@angular-devkit/schematics 8.3.4
@angular/cdk 8.2.0
@angular/cli 8.3.4
@angular/flex-layout 8.0.0-beta.27
@angular/http 7.2.15
@angular/material 8.2.0
@angular/material-moment-adapter 8.2.0
@ngtools/webpack 8.3.4
@schematics/angular 8.3.4
@schematics/update 0.803.4
rxjs 6.5.3
typescript 3.4.2
webpack 4.40.2
package.json (dependencies & devDependencies)
"dependencies": {
"@angular/animations": "^8.2.6",
"@angular/cdk": "^8.2.0",
"@angular/common": "^8.2.6",
"@angular/compiler": "^8.2.6",
"@angular/core": "^8.2.6",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.6",
"@angular/http": "^7.2.15",
"@angular/material": "^8.2.0",
"@angular/material-moment-adapter": "^8.2.0",
"@angular/platform-browser": "^8.2.6",
"@angular/platform-browser-dynamic": "^8.2.6",
"@angular/router": "^8.2.6",
"@candidosales/material-time-picker": "^2.0.0",
"@ngrx/effects": "^8.3.0",
"@ngrx/router-store": "^8.3.0",
"@ngrx/store": "^8.3.0",
"@swimlane/ngx-charts": "^12.0.1",
"bootstrap": "^4.3.1",
"bowser": "^2.6.1",
"chart.js": "^2.8.0",
"cleave.js": "^1.5.3",
"core-js": "^3.2.1",
"countup.js-angular2": "^7.3.0",
"d3": "^5.12.0",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"highcharts": "^7.2.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"ng-html-util": "2.0.x",
"ng2-nouislider": "1.5.2",
"ngrx-store-freeze": "^0.2.4",
"ngx-cleave-directive": "^1.1.3",
"ngx-image-cropper": "^1.4.1",
"nouislider": "^9.0.0",
"oidc-client": "^1.9.1",
"rxjs": "^6.5.3",
"sweetalert2": "8.17.1",
"terraformer-wkt-parser": "^1.2.0",
"terser": "4.3.1",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.4",
"@angular-devkit/schematics": "^8.3.4",
"@angular/cli": "^8.3.4",
"@angular/compiler-cli": "^8.2.6",
"@angular/language-service": "^8.2.6",
"@ngrx/schematics": "^8.3.0",
"@ngrx/store-devtools": "^8.3.0",
"@types/googlemaps": "^3.37.6",
"@types/hammerjs": "^2.0.36",
"@types/jasmine": "^3.4.0",
"@types/jasminewd2": "~2.0.6",
"@types/lodash": "^4.14.138",
"@types/node": "^12.7.5",
"codelyzer": "^5.1.0",
"jasmine-core": "^3.4.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"rxjs-tslint": "^0.1.7",
"ts-node": "^8.3.0",
"tslint": "^5.20.0",
"typescript": "3.4.2",
"webdriver-manager": "^12.1.6",
"webpack": "^4.40.2"
}
The last line of the CountUp.js library after bundled into "scripts.js" has this token export:
export { CountUp };
This error came after I upgraded all dependencies in the project including CountUp.js.
The serve and build commands don't report any error and says the build is ok. It seems the functionality isn't affected, it is only reported at runtime every time a reload the App while serving the project locally with ng serve
, by the way this is almost the first output I get on the console.
I have checked-in the [x] Bug option but not sure of the implications, is only a syntax error after all.
I haven't tried what happens in production and not sure if it is safe to go to production or if I go back to a previos version. Any suggestion?
[X] Bug
[ ] Build issue
[ ] Feature request
Angular: 7
Angular CLI: 7.3.1
countup.js-angular2: 7.1.1
Jest: 24.5.0
Hi, I'm having an issue to run tests with Jest in a component that I'm using the lib. The error log from Jest is described below. Can you help me? Thanks.
src/app/components/limit-bar/limit-bar.component.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper"
config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\Development\neon-pj\node_modules\countup.js\dist\countUp.min.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.4",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.e
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)
at Object.<anonymous>.__assign (node_modules/countup.js-angular2/bundles/countup.js-angular2.umd.js:2:111)
at Object.<anonymous> (node_modules/countup.js-angular2/bundles/countup.js-angular2.umd.js:5:2)
Animation does not work in ionic/angular project. Just shows static number.
Angular 7.2.12, Ionic 4.2.0
Console Error:
ERROR TypeError: Cannot read property 'reset' of undefined
at CountUpDirective.push../node_modules/countup.js-angular2/fesm5/countup.js-angular2.js.CountUpDirective.animate (countup.js-angular2.js:59)
at CountUpDirective.push../node_modules/countup.js-angular2/fesm5/countup.js-angular2.js.CountUpDirective.onClick (countup.js-angular2.js:28)
at Object.eval [as handleEvent] (PrepHomePage.html:51)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
at HTMLHeadingElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
[ ] Bug
[ ] Build issue
[V] Feature request
Angular: 7.2.12
Angular CLI: 7.3.8
countup.js-angular2: 7.1.0
I need default binding.
For example, I create number type (100) class property, name is A.
then, I use the A to countup's endVal,
but it doesn't work.
This works with the endVal changed.
In IE9 or IE10 its not working getting error in it. but in crome and mozila not have issues
I want to animate countUp from an existing value. For example, I have 100 and I want to animate it to 200. Then I want to animate 200 to 300 an so on. For now, it always animates from 0.
[ ] Bug
[x] Build issue
[ ] Feature request
hello there! can you update deps to angular 9?
[x ] Bug
[ ] Build issue
[ ] Feature request
all version.
Angular:
Angular CLI:
countup.js-angular2:
https://stackblitz.com/edit/angular-countup
first countUp afterViewInit with duration 2s, after that change the duration to 30, and every 30s make the endVal increase 10, which make the countUp looks like always increasing.
button "view1" and "view2" changes the startVal and reset the progress.
the problem is after the countUp start of duration 30s, while the number is increasing, click button "view2", we will see the problem, the number first countUp to 3000 in 2s, and then continue the last countUp to 1010.
[fix suggestion]
I can not create a pull request, so I give my solution here.
modify ngOnChanges function as follow:
ngOnChanges(changes: SimpleChanges) {
if (changes.options && (changes.options.currentValue !== changes.options.priviousValue)) {
if (this.countUp)
this.countUp.reset();
this.countUp = new CountUp(this.el.nativeElement, this.endVal,this.options);
this.countUp.start(() => {
this.complete.emit();
});
} else if (changes.endVal && !changes.endVal.firstChange) {
if (this.previousEndVal != undefined) {
this.options = {
...this.options,
startVal: this.previousEndVal
};
}
this.countUp.update(this.endVal);
this.previousEndVal = this.endVal;
}
}
[x] Bug
[ ] Build issue
[ ] Feature request
Angular: ~15.2.8
Angular CLI: ~15.2.7
ngx-countup: ^13.1.0
This packages should work with Angular Universal, yet I get an error because countup.js references window
in the very first line of countup.min.js
:
./node_modules/.pnpm/[email protected]/node_modules/countup.js/dist/countUp.min.js:1
var t=window&&window.__assign||function(){return t=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var a in i=arguments[n])Object.prototype.hasOwnProperty.cal
l(i,a)&&(t[a]=i[a]);return t},t.apply(this,arguments)},i=function(){function i(i,n,s){var a=this;this.endVal=n,this.options=s,this.version="2.6.1",this.defaults={startVal:0,decimalPl
aces:0,duration:2,useEasing:!0,useGrouping:!0,useIndianSeparators:!1,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,s
crollSpyDelay:200,scrollSpyOnce:!1},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.once=!1,this.count=function(t){a.start
Time||(a.startTime=t);var i=t-a.startTime;a.remaining=a.duration-i,a.useEasing?a.countDown?a.frameVal=a.startVal-a.easingFn(i,0,a.startVal-a.endVal,a.duration):a.frameVal=a.easingFn(
i,a.startVal,a.endVal-a.startVal,a.duration):a.frameVal=a.startVal+(a.endVal-a.startVal)*(i/a.duration);var n=a.countDown?a.frameVal<a.endVal:a.frameVal>a.endVal;a.frameVal=n?a.endVa
l:a.frameVal,a.frameVal=Number(a.frameVal.toFixed(a.options.decimalPlaces)),a.printValue(a.frameVal),i<a.duration?a.rAF=requestAnimationFrame(a.count):null!==a.finalEndVal?a.update(a
.finalEndVal):a.options.onCompleteCallback&&a.options.onCompleteCallback()},this.formatNumber=function(t){var i,n,s,e,o=t<0?"-":"";i=Math.abs(t).toFixed(a.options.decimalPlaces);var
r=(i+="").split(".");if(n=r[0],s=r.length>1?a.options.decimal+r[1]:"",a.options.useGrouping){e="";for(var l=3,h=0,u=0,p=n.length;u<p;++u)a.options.useIndianSeparators&&4===u&&(l=2,h=
1),0!==u&&h%l==0&&(e=a.options.separator+e),h++,e=n[p-u-1]+e;n=e}return a.options.numerals&&a.options.numerals.length&&(n=n.replace(/[0-9]/g,(function(t){return a.options.numerals[+t
]})),s=s.replace(/[0-9]/g,(function(t){return a.options.numerals[+t]}))),o+a.options.prefix+n+s+a.options.suffix},this.easeOutExpo=function(t,i,n,s){return n*(1-Math.pow(2,-10*t/s))*
1024/1023+i},this.options=t(t({},this.defaults),s),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.op
tions.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(n),this.options.decimalPlaces=Math.
max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.op
tions.useGrouping=!1),this.el="string"==typeof i?document.getElementById(i):i,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined","undefined"!=t
ypeof window&&this.options.enableScrollSpy&&(this.error?console.error(this.error,i):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push((function(){return a.handleScro
ll(a)})),window.onscroll=function(){window.onScrollFns.forEach((function(t){return t()}))},this.handleScroll(this)))}return i.prototype.handleScroll=function(t){if(t&&window&&!t.once
){var i=window.innerHeight+window.scrollY,n=t.el.getBoundingClientRect(),s=n.top+window.pageYOffset,a=n.top+n.height+window.pageYOffset;a<i&&a>window.scrollY&&t.paused?(t.paused=!1,s
etTimeout((function(){return t.start()}),t.options.scrollSpyDelay),t.options.scrollSpyOnce&&(t.once=!0)):(window.scrollY>a||s>i)&&!t.paused&&t.reset()}},i.prototype.determineDirectio
nAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold&&
this.options.useEasing){this.finalEndVal=t;var n=this.countDown?1:-1;this.endVal=t+n*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=
null;null!==this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},i.prototype.start=function(t){this.error||(t&&(this.options.onCompleteCallback=t),this.duration>
0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},i.prototype.pauseResume=function(){this.paused?(t
his.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(t
his.rAF),this.paused=!this.paused},i.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.start
Val),this.frameVal=this.startVal,this.printValue(this.startVal)},i.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),t
his.endVal!==this.frameVal&&(this.startVal=this.frameVal,null==this.finalEndVal&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAn
imationFrame(this.count))},i.prototype.printValue=function(t){var i;if(this.el){var n=this.formattingFn(t);if(null===(i=this.options.plugin)||void 0===i?void 0:i.render)this.options.
plugin.render(this.el,n);else if("INPUT"===this.el.tagName)this.el.value=n;else"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=n:this.el.innerHTML=n}},i.proto
type.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},i.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid
start or end value: ".concat(t),null)},i.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},i}();export{i as CountUp};
^
ReferenceError: window is not defined
at Module.85059 (./node_modules/.pnpm/[email protected]/node_modules/countup.js/dist/countUp.min.js:1:7)
at __webpack_require__ (./webpack/bootstrap:19:1)
at Module.91501 (./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]/node_modules/ngx-cookie-service-ssr/fesm2020/ngx-cookie-service-ssr.mjs:214:1)
at __webpack_require__ (./webpack/bootstrap:19:1)
at Module.20906 (./apps/frontend/src/app/about/about-routing.module.ts:13:25)
at __webpack_require__ (./webpack/bootstrap:19:1)
at Module.60858 (./apps/frontend/src/app/app.component.html:1:26)
at __webpack_require__ (./webpack/bootstrap:19:1)
at Module.51365 (./apps/frontend/src/app/app.module.ts:30:15)
at __webpack_require__ (./webpack/bootstrap:19:1)
Node.js v20.0.0
Hi I have a small issue. How can I reset count up js?
At the moment I just use html to use count up js and pass options to it. Like this:
<h1 id=“exampleID“ [countUp]="myEndVal" [options]="myOpts">0</h1>
But how can I reset it all to zero? StartVal, EndVal etc.?
[ ] Bug
[ ] Build issue
[*] Feature request
Angular: 13
Angular CLI: 13
ngx-countup: 13
This is a cool library. Thanks for building it. I've used it in multiple projects.
Currently, there is no way to reanimate the count up when the developer wants to do so. For example, the developer may want to be reanimating after every interval of some seconds. Or the developer may want to reanimate the countUp whenever the countUp is scrolled into view (especially when it is not among the first things the user sees on the page).
Making the private animate()
method on the CountUpDirective
public should solve this problem. This way the developer can use @ViewChild
to select the directive and call animate when they want to.
I was surprised that the method in question was private. Didn't know what motivated making it private in the first place so that's why I opened this issue first, rather than sending a pull request with the change directly.
[ ] Bug
[ x ] Build issue
[ ] Feature request
ngular CLI: 8.1.1
Node: 10.16.3
OS: win32 x64
Angular: 8.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic
... platform-server, router
@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.0.6
@angular-devkit/schematics 8.1.1
@ngtools/webpack 8.0.6
@schematics/angular 8.1.1
@schematics/update 0.801.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
Angular:
Angular CLI:
ngx-countup:
ng build --configuration="production" returns:
ERROR in ./node_modules/ngx-countup/fesm5/ngx-countup.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16514:30)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16740:24)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16635:21)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16692:24)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16703:24)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16599:21)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16635:21)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16692:24)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16703:24)
at checkNodeForDecorators (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (C:\software\estavel\hawker-frontend\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16599:21)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.