ngx-countdown

Simple, easy and performance countdown for angular

Demo

• Live Demo
• Stackblitz

Usage

1. Install

npm install ngx-countdown --save

import CountdownModule。

import { CountdownModule } from 'ngx-countdown';

@NgModule({
    imports: [ BrowserModule, CountdownModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

2、Template

<countdown [config]="config"
    (start)="onStart()"
    (finished)="onFinished()"
    (notify)="onNotify($event)"></countdown>

Name	Type	Default	Summary
config	Config	-	see Config
begin()	-	-	Triggers when {demand: false}
restart()	-	-	-
stop()	-	-	-
pause()	-	-	-
resume()	-	-	-
start	EventEmitter	-	Triggers when start
finished	EventEmitter	-	Triggers when finished
notify	EventEmitter(time: number)	-	Triggers when notify, need setting config.notify values
event	EventEmitter<{ action: string, left: number }>	-	Catch all event

How call component methods

@ViewChild(CountdownComponent) counter: CountdownComponent;
resetTimer(){
    this.counter.restart();
    this.counter.stop();
    this.counter.pause();
    this.counter.resume();
}

Config

Name	Type	Default	Summary
demand	boolean	false	start the counter on demand, must call begin() to starting
template	string	$!h!时$!m!分$!s!秒	Custom render template, if is empty use the <ng-content> content, and $!s-ext! it's 0.1s accuracy
leftTime	number	0	Calculate the remaining time based on the server, e.g: 10,5.5(May be dropped frames) (Unit: seconds)
stopTime	number	0	结束时间：指的是根据本地时间至结束时间进行倒计时。（单位：UNIX时间戳 ms）
varRegular	RegExp	/\$\{([\-\w]+)\}/g	模板解析正则表达式，有时候由于模板结构比较特殊，无法根据默认的表达式进行解析，那就需要修改它。
clock	Array		时钟控制数组，特殊需求时可以修改，里面是三元组：指针名、进制、位数，可参考大于99小时demo
notify	number[]		第xx秒时调用 notify 函数，值必须是正整数
repaint	Function		Custom repaintes

About repaints

The timer will call repaint function every time, if it's 0.1s accuracy, it will be more frequent. so you can make same special effects, like Flip.

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)