# ng-click-outside2

> Angular directive for handling click events outside an element.

Latest version **20.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 20.0.0 |
| Published | 2026-06-06 |
| First published | 2022-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 47.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 15 |
| Author | Eugene Cheung, Manuel Schmidt |
| Maintainers | kr0san89 |
| Keywords | angular, ng, click, event, outside, handler |

## Links

- npm: https://www.npmjs.com/package/ng-click-outside2
- Repository: https://github.com/Kr0san89/ng-click-outside
- Homepage: https://github.com/Kr0san89/ng-click-outside#readme
- Issues: https://github.com/Kr0san89/ng-click-outside/issues
- npm.io page: https://npm.io/package/ng-click-outside2

## Dependencies (1)

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

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

- 20.0.0 (latest) — 2026-06-06
- 11.0.0-next-0 (alpha) — 2022-06-22
- 19.0.0 — 2025-12-03
- 18.0.1 — 2025-06-10
- 18.0.0 — 2025-06-10
- 17.0.0 — 2024-12-17
- 16.0.0 — 2024-05-30
- 15.0.1 — 2024-03-26
- 15.0.0 — 2024-03-18
- 14.0.1 — 2024-02-26
- 14.0.0 — 2024-02-26
- 13.0.0 — 2023-11-19
- 12.0.0 — 2023-08-26
- 11.2.0 — 2023-05-16
- 11.1.0 — 2022-06-24
- … 6 more at https://npm.io/package/ng-click-outside2/versions

## README

# ng-click-outside2


[![NPM](https://img.shields.io/npm/v/ng-click-outside2?color=orange&style=flat-square)](https://www.npmjs.com/package/ng-click-outside2)
[![License](https://img.shields.io/github/license/Kr0san89/ng-click-outside?color=blue&style=flat-square)](https://github.com/Kr0san89/ng-click-outside/blob/master/LICENSE)
[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)
[![GitHub issues](https://img.shields.io/github/issues/Kr0san89/ng-click-outside.svg "GitHub issues")](https://github.com/Kr0san89/ng-click-outside)
[![GitHub stars](https://img.shields.io/github/stars/Kr0san89/ng-click-outside.svg "GitHub stars")](https://github.com/Kr0san89/ng-click-outside)

Angular directive for handling click events outside an element.

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

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

## Table of contents
1. [Installation](#installation)
2. [Compatibility](#compatibility)
3. [Options](#options)
4. [Usage](#example-usage)
5. [Migration from ng-click-outside](#migration-from-ng-click-outside)

## Installation

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

## Compatibility
| Angular  | Version | NPM                         |
|----------|---------|-----------------------------| 
| 13       | 10.x.x  | `ng-click-outside2@^10.0.0` |
| 14,15,16 | 11.x.x  | `ng-click-outside2@^11.0.0` |
| 16,17    | 12.x.x  | `ng-click-outside2@^12.0.0` |
| 17       | 13.x.x  | `ng-click-outside2@^13.0.0` |
| 17       | 14.x.x  | `ng-click-outside2@^14.0.0` |
| 17,18    | 15.x.x  | `ng-click-outside2@^15.0.0` |
| 18,19    | 16.x.x  | `ng-click-outside2@^16.0.0` |
| 19,20    | 17.x.x  | `ng-click-outside2@^17.0.0` |
| 20,21    | 18.x.x  | `ng-click-outside2@^18.0.0` |
| 21,22    | 19.x.x  | `ng-click-outside2@^19.0.0` |
| 22       | 20.x.x  | `ng-click-outside2@^20.0.0` |

If you use Angular <= 12 please use the original package. https://www.npmjs.com/package/ng-click-outside

### 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. (Import: `NgClickOutsideAttachOutsideDirective`) |
| `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)). (Import `NgClickOutsideDelayOutsideDirective`)                                                                                                     |
| `clickOutsideEmitOnBlur` | -       | -         | If enabled, emits an `blurWindow` event when user clicks outside of applications' window while it's visible. Especially useful if page contains iframes. (Import `NgClickOutsideEmitOnBlurDirective`)                                                                                              |
| `clickOutsideExclude` | string  |           | A comma-separated string of DOM element queries to exclude when clicking outside of the element. (Import NgClickOutsideExcludeDirective) For example: `[clickOutsideExclude]="'button,.btn-primary'"`.                                                                                             |

## Example Usage

Add `NgClickOutsideDirective` to your imports:

```typescript
import {NgClickOutsideDirective} from 'ng-click-outside2';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgClickOutsideDirective],
  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);
  }
}
```

### Usage with Excluding classes
```typescript
import {NgClickOutsideDirective} from 'ng-click-outside2';

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

You can then use the directive in your templates:

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


## Migration from ng-click-outside

```
// change imports
import { ClickOutsideModule } from 'ng-click-outside';
// to
import {NgClickOutsideDirective} from 'ng-click-outside2';

// and in Module import
ClickOutsideModule
// to
NgClickOutsideDirective
```
---

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