ng-circle-countdown v2.0.1

Angular circle countdown (NgCircleCountdown)

An Angular package for displaying a circle countdown fully configurable.

Compatibility:

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

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.