In this post I am going to share simple, clean angular component to add countdown and countup timer on your website. If you have a deal section on your website and display countdown timer along with deal then you can use this plugin to simply display realtime countdown timer.
cd-timer is able to:
– count up / count down.
– manage start time and end time.
– manage several displaying format.
Prerequisites
Installation
Execute npm install angular-cd-timer
Usage
cd-timer count every seconds.
Basic usage
This simple integration
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 like 0d 0h 0m 0s.
– hms: Display like HH:MM:SS.
– 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
– [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 is CdTimerComponent.
– (onTick): Called each tick count. Argument is TimeInterface.
– (onStart): Called when timer starts. Argument is CdTimerComponent.
– (onStop): Called when timer stop. Argument is CdTimerComponent.
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.
See live demo and download source code.
This awesome script developed by clemdesign. Visit their official repository for more information and follow for future updates.
