NgxCountdown

An angular countdown component, inspired by vant.

_development environment: angular 8.2.14_

👉 Demo

Install

``bash
npm i @ciri/ngx-countdown
`

Quick Start

Add it to your module:

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

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

Add to view:

`html



s
`

Millisecond Render

`html

`

Manual Control

`html
#counter
[time]="10000"
format="HH:mm:ss:SSS"
[millisecond]="true"
[autoStart]="false"
>> state: {{ counter.state }}


start 
pause 
reset
`

Custom Render

`html


{{ data.formattedTime }}



remain: {{ data.remain }}ms


``

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 |