# ng-idle-click

> A directive to prevent multiple clicks / submits

Latest version **1.0.1** (published 2019-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-idle-click
pnpm add ng-idle-click
yarn add ng-idle-click
bun add ng-idle-click
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-05-22 |
| First published | 2018-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 113.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Bob Lee |
| Maintainers | bob-lee |
| Keywords | angular, directive |

## Links

- npm: https://www.npmjs.com/package/ng-idle-click
- Repository: https://github.com/bob-lee/ng-notes
- Homepage: https://github.com/bob-lee/ng-notes#readme
- Issues: https://github.com/bob-lee/ng-notes/issues
- npm.io page: https://npm.io/package/ng-idle-click

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.1 (latest) — 2019-05-22
- 1.0.0 — 2019-05-17
- 0.0.8 — 2018-11-06
- 0.0.7 — 2018-11-05
- 0.0.6 — 2018-10-27
- 0.0.5 — 2018-09-25
- 0.0.4 — 2018-09-24
- 0.0.3 — 2018-08-22
- 0.0.2 — 2018-08-21
- 0.0.1 — 2018-08-19

## README

# ng-idle-click

[![npm](https://img.shields.io/npm/v/ng-idle-click.svg)](https://www.npmjs.com/package/ng-idle-click)
[![npm License](https://img.shields.io/npm/l/ng-idle-click.svg?style=flat-square)](https://opensource.org/licenses/mit-license.php)

This library provides a directive `idleClick` to prevent multiple clicks or submits by using a singlton service maintaining a `busy` flag. Normally `click` event is handled like:


```
<button (click)="handle($event)">

handle(event) {
  // do something
}
```


Instead handle `idleClick` event that emits with the usual `event` plus a function `done` to be called after job done:
```
<button (idleClick)="handle($event)">

handle({ event, done }) {
  // do something
  done(); // and call this
}
```


A `busy` flag will be set to true at `click` event and set to false at `done` function call. Any `click`s will be ignored while it is busy.

`done` function also can be called asynchronously inside a callback function or `async` handler function like:

```
handleAsync1({ event, done }) {
  setTimeout((event) => {
    // do something
    done();
  });
}

async handleAsync2({ event, done }) {
  await this.doSomething(event);
  done();
}
```


If handling a click event takes longer than 1 second, the directive will play a default (opacity) animation on host element until it is `done` to indicate it is busy. You can override this behavior by providing your own loader class name, e.g. `[idleClickLoader]="'my-loader'"`.

A [Stackblitz demo](https://stackblitz.com/edit/angular-zta1qz?embed=1&file=src/app/app.component.ts) is available to show the various usage.


```
// to install
npm install ng-idle-click

// in app.module.ts
import { NgIdleClickModule } from 'ng-idle-click';
@NgModule({
  imports: [
    NgIdleClickModule,

// in template
<button (idleClick)="handle($event)">

// in component
handle({ event, done }) {
  // do something
  done(); // and call this
}
```

---
_Source: https://npm.io/package/ng-idle-click · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._