https://github.com/xiaojundebug/ngx-countdown

An angular countdown component.
https://github.com/xiaojundebug/ngx-countdown

angular countdown ng

Last synced: 21 days ago
JSON representation

An angular countdown component.

• Host: GitHub
• URL: https://github.com/xiaojundebug/ngx-countdown
• Owner: xiaojundebug
• Created: 2020-06-04T16:36:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:49:54.000Z (almost 2 years ago)
• Last Synced: 2024-11-18T11:17:04.561Z (about 1 month ago)
• Topics: angular, countdown, ng
• Language: TypeScript
• Homepage: https://xiaojundebug.github.io/ngx-countdown/
• Size: 4.99 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxCountdown

An angular countdown component, inspired by [vant](https://github.com/youzan/vant).

_development environment: angular 8.2.14_



  



👉 [Demo](https://stackblitz.com/edit/ngx-countdown-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

 state: {{ counter.state }}




start 

pause 

reset

```

## Custom Render

```html

  

    {{ data.formattedTime }}

    


      {{ data.fragments[0] }}:

      {{ data.fragments[1] }}:

      {{ data.fragments[2] }}:

      {{ data.fragments[3] }}

    

    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](#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                                     |