@choudharymahipal/countdown-timer
v2.0.0
Published
You can install it from here [NPM Package](https://www.npmjs.com/package/@choudharymahipal/countdown-timer)
Downloads
197
Readme
Countdown Timer
You can install it from here NPM Package
Overview
CountdownTimer is a lightweight, customizable JavaScript library that enables you to create countdown timers effortlessly. Ideal for web applications, events, or any time-based functionality.
Demo
Features
- Easy integration and setup
- Customizable appearance
- Show/Hide cards (Days, Hours, Minutes and Seconds)
- Customizable Labels (Change labels according to your language preferences)
- Callback to get status about countdown timer.
Installation
Install the library via npm:
npm i @choudharymahipal/countdown-timer
if any dependancy error then try this
npm i @choudharymahipal/countdown-timer --legacy-peer-deps
Usage
Step 1: Import the Module
In your app.module.ts:
import { CountdownTimerModule } from '@choudharymahipal/countdown-timer';
@NgModule({
imports: [
CountdownTimerModule
],
})
export class AppModule { }
Step 2: Add the Component
Use the countdown timer in your component's template:
For v0.0.2 : Just pass your
targetDate
and it will generate countdown timer based ontargetDate
. HeretargetDate
is required and It will acceptDate
format only, not a string.
<mahi-countdown-timer [targetDate]="targetDate"></mahi-countdown-timer>
For v1.0.0 : We have added 4 new properties to show and hide any card based on your requirements.
display_days
,display_hours
,display_minutes
anddisplay_seconds
areboolean
type variables. Just passtrue
andfalse
, it will show/hide cards automatically. All these 4 properties are optional.
<mahi-countdown-timer
[targetDate]="targetDate"
[display_days]="display_days"
[display_hours]="display_hours"
[display_minutes]="display_minutes"
[display_seconds]="display_seconds"
>
</mahi-countdown-timer>
For v2.0.0 : Now, New customizable Labels and callback events are introduced. You can add your own labels for each cards in your language. And from
isTimerRunning
andtimeRemainingCount
, will give you, latest updated status about current countdown timer. For more details you can check its demo on stackblitz.
<mahi-countdown-timer
[targetDate]="targetDate"
[display_days]="display_days"
[display_hours]="display_hours"
[display_minutes]="display_minutes"
[display_seconds]="display_seconds"
[label_days]="label_days"
[label_hours]="label_hours"
[label_minutes]="label_minutes"
[label_seconds]="label_seconds"
(isTimerRunning)="getIsTimerRunning($event)"
(timeRemainingCount)="getTimeRemainingCount($event)">
>
</mahi-countdown-timer>
Step 3: Define the Target Time and setup properties
In your component TypeScript file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class YourComponent {
targetTime: Date = new Date('2025-12-31T23:59:59'); //Required
//show and hide cards
display_days: boolean = false; //Optional
display_hours: boolean = true; //Optional
display_minutes: boolean = true; //Optional
display_seconds: boolean = true; //Optional
//labels
label_days: string = "Day"; //Optional
label_hours: string = "Hour"; //Optional
label_minutes: string = "Minute"; //Optional
label_seconds: string = "Second"; //Optional
//Callback events
isTimerRunning: boolean = false;
timeRemaining = {
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
};
constructor() {}
getIsTimerRunning(event:any){
this.isTimerRunning = event;
}
getTimeRemainingCount(event:any){
this.timeRemaining = event;
}
}
Contributing
[!NOTE] We welcome contributions to the Countdown Timer Library! If you'd like to help out, please visit our GitHub repository: countdown-timer-library.