@ciri/ngx-countdown v1.0.0

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

Outputs

Available Formats

Public Api