Angular circle countdown (NgCircleCountdown)
An Angular package for displaying a circle countdown fully configurable.
Compatibility:
Angular |
---|
16.x.x |
Installation
Install This Library
$ npm install ng-circle-countdown --save
Usage
Import
Add CircleCountdownModule
to your module file:
imports: [CircleCountdownModule];
You can use it by this way:
<div class="counter-container">
<ng-circle-countdown
#timer_color
[duration]="10000"
[colors]="[ '#004777', '#F7B801', '#A30000', '#A30000' ]"
[colorsTime]="[ 7, 5, 2, 0 ]">
<ng-template #counter let-counter>
<span class="remaining-time" [style.color]="counter.color">{{counter.value}}</span>
</ng-template>
</ng-circle-countdown>
</div>
To catch the onComplete countDown event, you have to import the CountdownService
and use a compute
on the isCompleted
property:
public isCompleted: Signal
<boolean> = computed(() => this.countDown().isCompleted);
You can choose to use a formControl or just a formControlName. It depends on your needs.
Options
Options | Type | Default | Description |
---|---|---|---|
duration | number |
0 |
Countdown duration (in ms) |
color | string |
#004777 |
Primary color for the countdown displaying |
colors | <string>[] |
[] |
Colors (HEX format) for the countdown displaying if you want to insert a gradient |
colorsTime | number[] |
[] |
Time interval(in s) to determine when the countdown should change color |
strokeWidth | number |
6 |
Line thickness countdown |
size | number |
None |
Define the component size to match with your UI |
rotation | RotationType |
clockwise |
Direction of the countdown rotation |
You can choose to set only one color to the countdown, so you just have to set the color property.
If you want to generate a gradient color, then set the colors array with the colors you want to display.
You also have to set colorsTime array property to configure the color change moment.