angular-cd-timer v3.0.0
Angular-Cd-Timer
This is a simple, re-usable and inter-operable timer component for Angular CLI with multiple options.
cd-timer is able to:
- count up / count down.
- manage start time and end time.
- manage several displaying format.
Demo
Demo is available on this site: http://angular-cd-timer.clemdesign.fr/
Compatibilities
| Angular version | Library version |
|---|---|
| 4+ | 1.X.X |
| 12+ | 2.X.X |
| 13+ | 3.X.X |
Installation
Execute npm install angular-cd-timer
Usage
cd-timer count every seconds.
Configuration
Import the module as standard Angular module import:
import { CdTimerModule } from 'angular-cd-timer';
@NgModule({
// ...,
imports: [
// ...,
CdTimerModule
],
// ...
})
export class AppModule { }Basic usage
This simple integration <cd-timer></cd-timer> will start the timer with the default options of ticking every 1 second.
Attributes
cd-timer has the following attributes:
[startTime]: Define the start time (tick count) in second. Default: 0.[endTime]: Define the end time (tick count) in second. Default: 0 (Not enabled).[countdown]: Countdown if set to true. Default: false.[autoStart]: Autostart timer if set to true. Default: true.maxTimeUnit: Define the maximum unit allowed. Default: 'day'.day: Timer count up to day. Ex: 2d 12h 04m 12s.hour: Timer count up to hour. EX: 00d 60h 04m 12s.minute: Timer count up to minute. EX: 00d 00h 3604m 12s.second: Timer count up to minute. EX: 00d 00h 00m 216252s.
format: Display timer count in predefined format. Default: 'user' or 'default'.default: Display like0d 0h 0m 0s.hms: Display likeHH:MM:SS.ms: Display like[HH]:MM:SS. Hours are shown just when the timer pass the first 60 minutes.intelli: Display in condensed format:- only seconds: 25s
- minutes and seconds: 02min 12s
- hours and minutes: 10h 21min
- days and hours: 2days 12min
user: Display according user markup in<cd-timer></cd-timer>:[seconds]: display seconds[minutes]: display minutes[hours]: display hours[days]: display days
Callbacks
cd-timer has the following callbacks (event emitter):
(onComplete): Called when tick count reach endTime or 0. Argument isCdTimerComponent.(onTick): Called each tick count. Argument isTimeInterface.(onStart): Called when timer starts. Argument isCdTimerComponent.(onStop): Called when timer stop. Argument isCdTimerComponent.
Public methods
cd-timer is controlable by the following public methods:
| Method name | Description |
|---|---|
start() | Start timer from 0. |
stop() | Stop timer. |
resume() | Resume timer from the last tick count. |
reset() | Stop and reset timer. |
get() | Get time information by TimeInterface object. |
Timer shall be bind with @ViewChild() in Angular App.
Contribution
We welcome any or all kinds of contributions! Please submit pull requests(https://github.com/clemdesign/angular-cd-timer/pulls or create issues to contribute to this project :)
License
Under MIT Copyright (c) 2018-2021 clemdesign