Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Simple, easy and performance countdown for angular
https://github.com/cipchk/ngx-countdown

angular angular-countdown angular5 countdown ngx-countdown performance-countdown

Last synced: 6 days ago
JSON representation

Simple, easy and performance countdown for angular

Host: GitHub
URL: https://github.com/cipchk/ngx-countdown
Owner: cipchk
License: mit
Created: 2017-04-27T05:34:39.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-04-08T18:27:23.000Z (10 months ago)
Last Synced: 2024-04-14T06:43:52.226Z (10 months ago)
Topics: angular, angular-countdown, angular5, countdown, ngx-countdown, performance-countdown
Language: TypeScript
Homepage: https://cipchk.github.io/ngx-countdown/
Size: 3.47 MB
Stars: 191
Watchers: 7
Forks: 58
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-angular - ngx-countdown - Simple, easy and performant countdown for angular. (Uncategorized / Uncategorized)
awesome-angular - ngx-countdown - Simple, easy and performant countdown. (Table of contents / Third Party Components)
fucking-awesome-angular - ngx-countdown - Simple, easy and performant countdown. (Table of contents / Third Party Components)

README

        # ngx-countdown

Simple, easy and performance countdown for angular

[![NPM version](https://img.shields.io/npm/v/ngx-countdown.svg)](https://www.npmjs.com/package/ngx-countdown)

[![Ci](https://github.com/cipchk/ngx-countdown/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-countdown/actions?query=workflow%3ACi)

[![codecov](https://codecov.io/github/cipchk/ngx-countdown/graph/badge.svg?token=SPQeYvppgH)](https://codecov.io/github/cipchk/ngx-countdown)

## Demo

- [Live Demo](https://cipchk.github.io/ngx-countdown/)

- [Stackblitz](https://stackblitz.com/edit/ngx-countdown-setup)

## Usage

### 1. Install

```

npm install ngx-countdown --save

```

import `CountdownModule`。

```typescript

import { CountdownModule } from 'ngx-countdown';

@NgModule({

  imports: [ BrowserModule, CountdownModule ],

  declarations: [AppComponent],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### 2、Template

```html

```

**Method**

| Name | Description |

|------|-------------|

| `begin()` | Start countdown, you must manually call when `demand: false` |

| `restart()` | Restart countdown |

| `stop()` | Stop countdown, must call `restart` when stopped, it's different from pause, unable to recover |

| `pause()` | Pause countdown, you can use `resume` to recover again |

| `resume()` | Resume countdown |

**How call component methods**

```ts

@ViewChild('cd', { static: false }) private countdown: CountdownComponent;

this.countdown.begin();

```

### Standalone

```ts

@Component({

  template: ``,

  imports: [CountdownComponent],

})

export class App

```

## API

### countdown

| Name | Type | Default | Summary |

|------|------|---------|---------|

| `config` | `CountdownConfig` | - | Config |

| `event` | `EventEmitter` | - | Events |

### CountdownConfig

| Name | Type | Default | Summary |

|------|------|---------|---------|

| demand | `boolean` | `false` | Start the counter on demand, must call `begin()` to starting |

| leftTime | `number` | `0` | Calculate the remaining time based on the server, e.g: `10`,`5.5`, (Unit: seconds) |

| stopTime | `number` | - | Refers to counting down from local time to end time (Unit: Milliseconds second UNIX timestamp) |

| format | `string` | `HH:mm:ss` | Formats a date value, pls refer to [Accepted patterns](https://angular.io/api/common/DatePipe#usage-notes) |

| prettyText | `(text: string) => string` | - | Beautify text, generally used to convert formatted time text into HTML |

| notify | `number[], number` | - | Should be trigger type `notify` event on the x second. When values is `0` will be trigger every time |

| formatDate | `CountdownFormatFn` | - | Default based on the implementation of `formatDate` in `@angular/common`, You can changed to other libs, e.g: [date-fns](https://date-fns.org/v2.0.1/docs/format) |

| timezone | `string` | `+0000` | A timezone offset (such as '+0430'), or a standard UTC/GMT. When not supplied, uses the end-user's local system timezone |

### CountdownEvent

| Name | Type | Summary |

|------|------|---------|

| `action` | `start,stop,restart,pause,resume,notify,done` | Action of the event |

| `status` | `CountdownStatus` | Status of the countdown |

| `left` | `number` | Number of remaining milliseconds |

| `text` | `string` | Format the text |

**Global Config**

```ts

bootstrapApplication(AppComponent, {

  providers: [provideCountdown({ format: `mm:ss` })],

}).catch((err) => console.error(err));

```

## Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use [GitHub Issues](https://github.com/cipchk/ngx-countdown/issues) board to report bugs and feature requests (not our email address)

2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

### License

The MIT License (see the [LICENSE](https://github.com/cipchk/ngx-countdown/blob/master/LICENSE) file for the full text)