@ciri/ngx-countdown

NgxCountdown

An angular countdown component, inspired by vant.

development environment: angular 8.2.14

👉 Demo

Install

npm i @ciri/ngx-countdown

Quick Start

Add it to your module:

import { CountdownModule } from '@ciri/ngx-countdown'

@NgModule({
  // ...
  imports: [
    // ...
    CountdownModule
  ],
})

Add to view:

<ngx-countdown [time]="86400000"></ngx-countdown>
<br />
<ngx-countdown [time]="60000" format="ss"></ngx-countdown>s

Millisecond Render

<ngx-countdown [time]="86400000" [millisecond]="true" format="HH:mm:ss SSS"></ngx-countdown>

Manual Control

<ngx-countdown
  #counter
  [time]="10000"
  format="HH:mm:ss:SSS"
  [millisecond]="true"
  [autoStart]="false"
></ngx-countdown
>&nbsp;state: {{ counter.state }}
<br />
<button (click)="counter.start()">start</button>&nbsp;
<button (click)="counter.pause()">pause</button>&nbsp;
<button (click)="counter.reset()">reset</button>

Custom Render

<ngx-countdown [time]="86400000 * 2" [render]="render" format="HH:mm:ss:SSS" [millisecond]="true">
  <ng-template #render let-data>
    <span style="font-size: 26px; color: royalblue">{{ data.formattedTime }}</span>
    <div style="display: flex">
      <span style="color: #D95140">{{ data.fragments[0] }}</span>:
      <span style="color: #58A55C">{{ data.fragments[1] }}</span>:
      <span style="color: #F2BE42">{{ data.fragments[2] }}</span>:
      <span style="color: #5086EC">{{ data.fragments[3] }}</span>
    </div>
    <span>remain: {{ data.remain }}ms</span>
  </ng-template>
</ngx-countdown>

Inputs

Name	Type	Default	Description
time	number	60000	Total time(milliseconds)
format	string	HH:mm:ss	Time format, see: Available Formats
autoStart	boolean	true	Whether to auto start count down
millisecond	boolean	false	Whether to enable millisecond render
render	TemplateRef	-	Custom render

Outputs

Event	Description	Return value
finish	Triggered when count down finished	-
tick	Triggered when count down changed	Remain time

Available Formats

Event	Description
DD	Day
HH	Hour
mm	Minute
ss	Second
S	Millisecond, 1-digit
SS	Millisecond, 2-digits
SSS	Millisecond, 3-digits

Public Api

Name	Type	Description
state	number	Current state: 0 = paused, 1 = playing, 2 = finished
start	function	Start count down
pause	function	Pause count down
reset	function	Reset count down