core/countdown-interval/countdown-interval.component.ts
Component to count down specific time interval, then emit when countdown ends. Next countdown is started right after previous one.
OnInit
OnDestroy
| selector | c8y-countdown-interval |
| standalone | true |
| imports |
NgClass
AsyncPipe
C8yTranslatePipe
|
| templateUrl | ./countdown-interval.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
| countdownInterval |
Type : number
|
|
Time in milliseconds to count down from. |
| countdownEnded |
Type : EventEmitter
|
|
Emits when countdown ends. |
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| reset |
reset()
|
|
Returns :
void
|
| start |
start()
|
|
Starts the countdown timer.
Returns :
void
|
| stop | ||||||||
stop(stopAtZero)
|
||||||||
|
Stops the countdown timer.
Parameters :
Returns :
void
|
| runSpinner$ |
Default value : new BehaviorSubject(false)
|
| secondsUntilRefresh$ |
Type : BehaviorSubject<string>
|
| countdownInterval | ||||||
getcountdownInterval()
|
||||||
setcountdownInterval(value: number)
|
||||||
|
Time in milliseconds to count down from.
Parameters :
Returns :
void
|
<div
class="time-elapsed"
data-cy="c8y-countdown-interval--countdown"
[style.--timescope]="countdownInterval + 'ms'"
[title]="'{{ secondsLeft }} s / {{ interval }} s' | translate: { secondsLeft: secondsUntilRefresh$ | async, interval: countdownInterval / 1000 }"
>
<svg
[ngClass]="{ 'time-on': runSpinner$ | async }"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="20"
cy="20"
r="15.8"
stroke="var(--c8y-brand-primary)"
stroke-width="6"
/>
</svg>
<span data-cy="c8y-countdown-interval--seconds">{{ secondsUntilRefresh$ | async }}</span>
</div>