Angular Count Down & Count Up Timer

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

Leave a Comment