The most simple way to display a countdown in angular 20 (standalone and ngModule)
npm install ngx-simple-countdownThe most simple way to display a countdown in angular 20. This package is compatible with standalone component or ngModule.
#### Links
- demo
- github repository
- twitter/x
``
npm i ngx-simple-countdown
yarn i ngx-simple-countdown
Since Angular 17, you have 2 ways to import the directive (standalone or ngModule)
`ts
import { NgxSimpleCountdownStandaloneDirective } from 'ngx-simple-countdown';
@Component({
selector: 'my-standalone-component',
standalone: true,
imports: [
...
NgxSimpleCountdownStandaloneDirective
]
})
export class MyStandaloneComponent implements OnInit {
...
}
`
`ts
import { NgxSimpleCountdownModule } from 'ngx-simple-countdown';
@NgModule({
imports: [NgxSimpleCountdownModule]
})
export class AppModule {}
`
`html
`
`html
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()"
>
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
$3
##### app.component.scss
you can add somes styles in your element
css
.countdown {
border: 2px solid red;
position: absolute;
top: 0;
right: 0;
}
``