1.0.0 • Published 5 years ago

@ciri/ngx-countdown v1.0.0

Weekly downloads
30
License
MIT
Repository
github
Last release
5 years ago

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

NameTypeDefaultDescription
timenumber60000Total time(milliseconds)
formatstringHH:mm:ssTime format, see: Available Formats
autoStartbooleantrueWhether to auto start count down
millisecondbooleanfalseWhether to enable millisecond render
renderTemplateRef-Custom render

Outputs

EventDescriptionReturn value
finishTriggered when count down finished-
tickTriggered when count down changedRemain time

Available Formats

EventDescription
DDDay
HHHour
mmMinute
ssSecond
SMillisecond, 1-digit
SSMillisecond, 2-digits
SSSMillisecond, 3-digits

Public Api

NameTypeDescription
statenumberCurrent state: 0 = paused, 1 = playing, 2 = finished
startfunctionStart count down
pausefunctionPause count down
resetfunctionReset count down
1.0.0

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago