Angular Simple Countdown (ngx-simple-countdown)

The most simple way to display a countdown in angular 10-11

Getting Started

Links

• demo
• github repository
• my twitter

Install

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

Import in your angular module (or feature module)

app.module.ts

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

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

Add "simpleCountdown" in a new div in your component

app.component.html

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

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

And 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 !

Questions ? contact me