Socket
Socket
Sign inDemoInstall

ngx-simple-countdown

Package Overview
Dependencies
3
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-simple-countdown

The most simple way to display a countdown in angular 16-17 (standalone and ngModule)


Version published
Weekly downloads
215
increased by14.97%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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

  • 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

typeName parameterdefault valuecustom value
inputlanguageenen/English - fr/Francais - pl/Polski - de/Deutschland - es/España - pt/Portugal - cs/Česká republika - ge/Georgian
inputendMessage"countdown finish"custom the end message (or empty message)
inputreactivetruefalse (remove seconds and minutes)
inputstyles"font-size:20px;color:#FFF;background-color:#000;padding:10px 5px;font-weight:bold"remplace my default
outputfinishxcallback 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 !

Keywords

FAQs

Last updated on 02 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc