Angular Simple Countdown (Standalone or ngModule)

The most simple way to display a countdown in angular 16-17. This package is compatible with standalone component or ngModule.

Getting Started

Links

• demo
• github repository
• twitter/x

1- Install

npm i ngx-simple-countdown
yarn i ngx-simple-countdown

2- Import in your project

With Angular 17, you have 2 ways to import the directive (standalone or ngModule)

2.a- With standalone component

import { NgxSimpleCountdownStandaloneDirective } from 'ngx-simple-countdown';

@Component({
  selector: 'my-standalone-component',
  standalone: true,
  imports: [
    ...
    NgxSimpleCountdownStandaloneDirective
  ]
})
export class MyStandaloneComponent implements OnInit {
...
}

2.b- With ngModule

import { NgxSimpleCountdownModule } from 'ngx-simple-countdown';

@NgModule({
  imports: [NgxSimpleCountdownModule]
})
export class AppModule {}

3- Use directive "simpleCountdown" in a new div in your angular component

<div class="countdown" simpleCountdown [dateTo]="1581242400"></div>

<!-- 
  convert your date to timestamps
  http://www.timestamp.fr/ 
-->

4- You can add some parameters

<div
  class="countdown"
  simpleCountdown
  [dateTo]="1581242400"
  [language]="'fr'"
  [endMessage]="'custom end message'"
  [reactive]="false"
  [styles]="'
    font-size: 20px;
    color: red;
    background-color: white;
    padding: 10px 4px;
    font-weight: bold;
  '"
  (finish)="onfinish()"
></div>

Parameters Docs

| type | Name parameter | default value | custom value | | ------ | -------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | input | language | en | en/English - fr/Francais - pl/Polski - de/Deutschland - es/España - pt/Portugal - cs/Česká republika - ge/Georgian | | input | endMessage | "countdown finish" | custom the end message (or empty message) | | input | reactive | true | false (remove seconds and minutes) | | input | styles | "font-size:20px;color:#FFF;background-color:#000;padding:10px 5px;font-weight:bold" | remplace my default | | output | finish | x | callback when the countdown was finish |

if your language is not supported please contact me

Add styles in your div

app.component.scss

you can add somes styles in your element

.countdown {
  border: 2px solid red;
  position: absolute;
  top: 0;
  right: 0;
}

And that's it, Enjoy !