In this post, I am going to share a simple and very clean angular component to add a count down and count up timer on your webpage. The Angular Countdown Timer is good for your deal pages where you need to show a timer to the visitors about a specific deal. You can start a new website and place it on the homepage or on specific deals pages.
You can use this plugin to simply display a real-time countdown timer on your website. It is SEO friendly. It is also compatible with AdSense.
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 was developed by clemdesign. Visit their official repository for more information and follow for future updates.
meaningful content! I like your work
Thank you