|
| 1 | +# Angular-Cd-Timer |
| 2 | + |
| 3 | +This is a simple, re-usable and inter-operable timer component for [Angular CLI](https://github.com/angular/angular-cli) with multiple options. |
| 4 | + |
| 5 | +`cd-timer` is able to: |
| 6 | +- count up / count down. |
| 7 | +- manage start time and end time. |
| 8 | +- manage several displaying format. |
| 9 | + |
| 10 | +## Demo |
| 11 | + |
| 12 | +Demo is available on this site: [http://angular-cd-timer.clemdesign.fr/](http://angular-cd-timer.clemdesign.fr/) |
| 13 | + |
| 14 | +## Installation |
| 15 | + |
| 16 | +Execute `npm install angular-cd-timer` |
| 17 | + |
| 18 | +## Usage |
| 19 | + |
| 20 | +`cd-timer` count every seconds. |
| 21 | + |
| 22 | +### Basic usage |
| 23 | + |
| 24 | +This simple integration `<cd-timer></cd-timer>` will start the timer with the default options of ticking every 1 second. |
| 25 | + |
| 26 | +### Attributes |
| 27 | + |
| 28 | +`cd-timer` has the following attributes: |
| 29 | +- `[startTime]`: Define the start time (tick count) in second. Default: 0. |
| 30 | +- `[endTime]`: Define the end time (tick count) in second. Default: 0 (Not enabled). |
| 31 | +- `[countdown]`: Countdown if set to true. Default: false. |
| 32 | +- `[autoStart]`: Autostart timer if set to true. Default: true. |
| 33 | +- `maxTimeUnit`: Define the maximum unit allowed. Default: 'day'. |
| 34 | + - `day`: Timer count up to day. Ex: 2d 12h 04m 12s. |
| 35 | + - `hour`: Timer count up to hour. EX: 00d 60h 04m 12s. |
| 36 | + - `minute`: Timer count up to minute. EX: 00d 00h 3604m 12s. |
| 37 | + - `second`: Timer count up to minute. EX: 00d 00h 00m 216252s. |
| 38 | +- `format`: Display timer count in predefined format. Default: 'user' or 'default'. |
| 39 | + - `default`: Display like `0d 0h 0m 0s`. |
| 40 | + - `hms`: Display like `HH:MM:SS`. |
| 41 | + - `intelli`: Display in condensed format: |
| 42 | + - only seconds: 25s |
| 43 | + - minutes and seconds: 02min 12s |
| 44 | + - hours and minutes: 10h 21min |
| 45 | + - days and hours: 2days 12min |
| 46 | + - `user`: Display according user markup in `<cd-timer></cd-timer>`: |
| 47 | + - `[seconds]`: display seconds |
| 48 | + - `[minutes]`: display minutes |
| 49 | + - `[hours]`: display hours |
| 50 | + - `[days]`: display days |
| 51 | + |
| 52 | +### Callbacks |
| 53 | + |
| 54 | +`cd-timer` has the following callbacks (event emitter): |
| 55 | +- `(onComplete)`: Called when tick count reach endTime or 0. Argument is `CdTimerComponent`. |
| 56 | +- `(onTick)`: Called each tick count. Argument is `TimeInterface`. |
| 57 | +- `(onStart)`: Called when timer starts. Argument is `CdTimerComponent`. |
| 58 | +- `(onStop)`: Called when timer stop. Argument is `CdTimerComponent`. |
| 59 | + |
| 60 | +### Public methods |
| 61 | + |
| 62 | +`cd-timer` is controlable by the following public methods: |
| 63 | + |
| 64 | +| Method name | Description | |
| 65 | +|:----------- |:----------------------------------------------- | |
| 66 | +| `start()` | Start timer from 0. | |
| 67 | +| `stop()` | Stop timer. | |
| 68 | +| `resume()` | Resume timer from the last tick count. | |
| 69 | +| `reset()` | Stop and reset timer. | |
| 70 | +| `get()` | Get time information by `TimeInterface` object. | |
| 71 | + |
| 72 | +Timer shall be bind with `@ViewChild()` in Angular App. |
| 73 | + |
| 74 | +## Contribution |
| 75 | + |
| 76 | +We welcome any or all kinds of contributions! |
| 77 | +Please submit [pull requests](https://github.com/clemdesign/angular-cd-timer/pulls or |
| 78 | +[create issues](https://github.com/clemdesign/angular-cd-timer/issues) to contribute to this project :) |
| 79 | + |
| 80 | +## License |
| 81 | + |
| 82 | +Under MIT |
| 83 | +Copyright (c) 2018 clemdesign |
0 commit comments