An angular countdown component.
npm install @ciri/ngx-countdownAn angular countdown component, inspired by vant.
_development environment: angular 8.2.14_
š Demo
``bash`
npm i @ciri/ngx-countdown
Add it to your module:
`typescript
import { CountdownModule } from '@ciri/ngx-countdown'
@NgModule({
// ...
imports: [
// ...
CountdownModule
],
})
`
Add to view:
`html`
`html`
`html`
[time]="10000"
format="HH:mm:ss:SSS"
[millisecond]="true"
[autoStart]="false"
>> state: {{ counter.state }}
`html``
{{ data.formattedTime }}
{{ data.fragments[0] }}:
{{ data.fragments[1] }}:
{{ data.fragments[2] }}:
{{ data.fragments[3] }}
remain: {{ data.remain }}ms
| 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
| Event | Description | Return value |
| ------ | ---------------------------------- | ------------ |
| finish | Triggered when count down finished | - |
| tick | Triggered when count down changed | Remain time |
| Event | Description |
| ----- | --------------------- |
| DD | Day |
| HH | Hour |
| mm | Minute |
| ss | Second |
| S | Millisecond, 1-digit |
| SS | Millisecond, 2-digits |
| SSS | Millisecond, 3-digits |
| 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 |