# ng-click-outside

> [DEPRECATED] Angular directive for handling click events outside an element.

Latest version **9.0.1** (published 2021-11-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 9.0.1 |
| Published | 2021-11-15 |
| First published | 2016-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 230 |
| Author | Eugene Cheung |
| Maintainers | arkon |
| Keywords | angular, ng, click, event, outside, handler |

## Links

- npm: https://www.npmjs.com/package/ng-click-outside
- Repository: https://github.com/arkon/ng-click-outside
- Homepage: http://echeung.me/ng-click-outside/
- Issues: https://github.com/arkon/ng-click-outside/issues
- npm.io page: https://npm.io/package/ng-click-outside

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 9.0.1 (latest) — 2021-11-15
- 9.0.0 — 2021-08-06
- 8.0.0 — 2021-03-22
- 7.0.1 — 2020-11-07
- 7.0.0 — 2020-07-30
- 6.0.0 — 2020-02-09
- 5.3.0 — 2020-01-11
- 5.1.1 — 2019-08-26
- 5.1.0 — 2019-08-25
- 5.0.0 — 2019-08-04
- 4.0.0 — 2018-05-20
- 3.3.0 — 2018-04-10
- 3.2.0 — 2017-12-31
- 3.1.1 — 2017-12-07
- 3.1.0 — 2017-12-01
- … 15 more at https://npm.io/package/ng-click-outside/versions

## README

# ng-click-outside

⚠️　**This package is deprecated and not maintained.** ⚠️

---

[![NPM](https://nodei.co/npm/ng-click-outside.png?compact=true)](https://nodei.co/npm/ng-click-outside/)

**[Demo](https://echeung.me/ng-click-outside/)**

*Formerly called [ng2-click-outside](https://github.com/arkon/ng2-click-outside)*

Angular directive for handling click events outside an element. Useful for things like reacting to clicking
outside of a dropdown menu or modal dialog.

Like binding to a regular `click` event in a template, you can do something like this:

```HTML
<div (clickOutside)="onClickedOutside($event)">My element</div>
```


## Installation

```shell
npm install --save ng-click-outside
```


## Usage

Add `ClickOutsideModule` to your list of module imports:

```typescript
import { ClickOutsideModule } from 'ng-click-outside';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ClickOutsideModule],
  bootstrap: [AppComponent]
})
class AppModule {}
```

You can then use the directive in your templates:

```typescript
@Component({
  selector: 'app',
  template: `
    <div (clickOutside)="onClickedOutside($event)">Click outside this</div>
  `
})
export class AppComponent {
  onClickedOutside(e: Event) {
    console.log('Clicked outside:', e);
  }
}
```

### Options

| Property name | Type | Default | Description |
| ------------- | ---- | ------- | ----------- |
| `attachOutsideOnClick` | boolean | `false` | By default, the outside click event handler is automatically attached. Explicitely setting this to `true` sets the handler after the element is clicked. The outside click event handler will then be removed after a click outside has occurred. |
| `clickOutsideEnabled` | boolean | `true` | Enables directive. |
| `clickOutsideEvents` | string | `'click'` | A comma-separated list of events to cause the trigger. For example, for additional mobile support: `[clickOutsideEvents]="'click,touchstart'"`. |
| `delayClickOutsideInit` | boolean | `false` | Delays the initialization of the click outside handler. This may help for items that are conditionally shown ([see issue #13](https://github.com/arkon/ng-click-outside/issues/13)). |
| `emitOnBlur` | boolean | `false` | If enabled, emits an event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. |
| `exclude` | string | | A comma-separated string of DOM element queries to exclude when clicking outside of the element. For example: `[exclude]="'button,.btn-primary'"`. |
| `excludeBeforeClick` | boolean | `false` | By default, `clickOutside` registers excluded DOM elements on init. This property refreshes the list before the `clickOutside` event is triggered. This is useful for ensuring that excluded elements added to the DOM after init are excluded (e.g. ng2-bootstrap popover: this allows for clicking inside the `.popover-content` area if specified in `exclude`). |

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