ngx-countdown npm

ngx-countdown is a countdown timer component for Angular. It provides an easy way to add a countdown timer to your Angular app.

Installation

To install ngx-countdown, simply run the following command:

npm install ngx-countdown --save

Usage

Importing the module

Import the CountdownModule into your app.module.ts file:

import { CountdownModule } from 'ngx-countdown';

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

Creating the countdown timer

The ngx-countdown component takes two inputs:

1. start: Specifies the start time, which needs to be in the future. You can set this input to a Date object.
2. end: Specifies the end time, which needs to be in the future. You can set this input to a Date object.

<ngx-countdown [start]="startDate" [end]="endDate"></ngx-countdown>

Styling the countdown timer

You can style the ngx-countdown component using CSS.

ngx-countdown {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

Events

The ngx-countdown component emits two events:

1. countdownFinished: This event is emitted when the countdown timer reaches 0.
2. countdownStarted: This event is emitted when the countdown timer starts.

Here is an example of how to use these events:

<ngx-countdown [start]="startDate" [end]="endDate" (countdownFinished)="onFinished()">
</ngx-countdown>

onFinished() {
  alert('Countdown finished!');
}

Conclusion

ngx-countdown provides a simple solution for adding a countdown timer to your Angular app. It's easy to use and highly customizable.