In this post I am going to share a simple and very clean angular component to add count down and count up timer on your webpage. It is good for your deal pages where you need to show a timer to the visitors about a specific deal. You can use this plugin to simply display real-time countdown timer on your website.
This is a simple, re-usable and inter-operable timer component with multiple options.
cd-timer
is able to:
- count up / count down.
- manage start time and end time.
- manage several displaying formats
Prerequisites
- Angular 4 and upper
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
.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.
See live demo and download the source code.
This awesome script developed by clemdesign. Visit their official repository for more information and follow for future updates.