17.0.0 • Published 2 months ago
ngx-simple-countdown v17.0.0
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
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 !
17.0.0
2 months ago
16.0.0
12 months ago
15.0.0
1 year ago
13.0.0
2 years ago
13.0.1
2 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.0
3 years ago
1.2.1
3 years ago
1.1.0
4 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.1
5 years ago