Angular Timer Component With Countup & Countdown | Cd-Timer

Angular-Cd-Timer is a simple, reusable, and interoperable timer component of the Angular CLI with multiple options.

angular countdown timer hours minutes seconds, javascript timer countdown with seconds, javascript count up timer start stop, multiple countdown timer angular, ngx countdown for angular

cd-timer is able to:

  • Count Up / Countdown.
  • Manage start time and end time.
  • Manage multiple presentation formats.

jQuery Plugin for a Showing Animated Countdown Timer | showTimer

How to make use of it:

Installation

npm install angular-cd-timer

Importing the module as a standard import for the angular module:

import { CdTimerModule } from 'angular-cd-timer';

@NgModule({
  // ...,
  imports: [
    // ...,
    CdTimerModule
  ],
  // ...
})
export class AppModule { }

Attributes

cd-timer has the following attributes:

  • [startTime]: Define the start time (tick count) in seconds. Default: 0.
  • [endTime]: Define the end time (tick count) in seconds. 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 counts up today. Ex: 2d 12h 04m 12s.
    • hour: Timer counts up to an hour. EX: 00d 60h 04m 12s.
    • minute: Timer counts up to a minute. EX: 00d 00h 3604m 12s.
    • second: Timer counts up to a minute. EX: 00d 00h 00m 216252s.
  • format: Display timer count in a 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: 2 days 12min
    • user: Display according to 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 reaches endTime or 0. Argument is CdTimerComponent.
  • (onTick): Called each tick count. Argument is TimeInterface.
  • (onStart): Called when the timer starts. Argument is CdTimerComponent.
  • (onStop): Called when the timer stopped. Argument is CdTimerComponent.

Public methods

cd-timer are controllable 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 the timer.
get()Get time information by TimeInterface the object.

Simple Clean Countup & Countdown Timer, Angular-Cd-Timer Plugin/Github, angular countdown timer npm, angular timer component hackerrank


See Demo And Download

Official Website(clemdesign): Click Here

This superior jQuery/javascript plugin is developed by clemdesign. For extra Advanced Usage, please go to the official website.

Share