ngx-simple-countdown-ar v16.0.3

Angular Simple Countdown (ngx-simple-countdown)

The most simple way to display a countdown in angular 15-16

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

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