Angular countdown and countup timer component

by

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.
Angular countdown and countup timer component
cd-timer is able to:
– count up / count down.
– manage start time and end time.
– manage several displaying format.

Prerequisites

  • Angular 4 and upper

Installation

Execute npm install angular-cd-timer

Usage

cd-timer count every seconds.

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 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 <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 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.

DEMO | DOWNLOAD

This awesome script developed by clemdesign. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by Rohit