├── .gitignore ├── .nvmrc ├── LICENSE ├── README.md ├── clickOutside.directive.d.ts ├── clickOutside.directive.js ├── clickOutside.directive.js.map ├── clickOutside.directive.ts ├── gulpfile.js ├── index.d.ts ├── index.js ├── index.js.map ├── index.ts ├── package.json ├── tsconfig.json └── typings.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v6 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016, Christian Liebel 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * Neither the name of angular2-click-outside nor the names of its 15 | contributors may be used to endorse or promote products derived from 16 | this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular2-click-outside 2 | 3 | This is a directive for detecting clicks outside of a DOM element where the directive is placed on. 4 | 5 | PRs welcome! 6 | 7 | ## Setup 8 | Run `npm i angular2-click-outside` and configure SystemJS accordingly. 9 | 10 | ## Sample Usage 11 | Using this directive is as easy as: 12 | 13 | ```[html] 14 |
15 | ``` 16 | 17 | You can pass the original `MouseEvent` to the registered handler as follows: 18 | 19 | ```[html] 20 |
21 | ``` 22 | 23 | ## Requirements 24 | 25 | Angular 2 RC 0 26 | Angular 4+ goto https://www.npmjs.com/package/ng-click-outside 27 | 28 | -------------------------------------------------------------------------------- /clickOutside.directive.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef, EventEmitter } from '@angular/core'; 2 | export declare class ClickOutsideDirective { 3 | private _elementRef; 4 | constructor(_elementRef: ElementRef); 5 | clickOutside: EventEmitter; 6 | onClick(event: MouseEvent, targetElement: HTMLElement): void; 7 | } 8 | -------------------------------------------------------------------------------- /clickOutside.directive.js: -------------------------------------------------------------------------------- 1 | System.register(['@angular/core'], function(exports_1, context_1) { 2 | "use strict"; 3 | var __moduleName = context_1 && context_1.id; 4 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 5 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 6 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 7 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 8 | return c > 3 && r && Object.defineProperty(target, key, r), r; 9 | }; 10 | var __metadata = (this && this.__metadata) || function (k, v) { 11 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 12 | }; 13 | var core_1; 14 | var ClickOutsideDirective; 15 | return { 16 | setters:[ 17 | function (core_1_1) { 18 | core_1 = core_1_1; 19 | }], 20 | execute: function() { 21 | ClickOutsideDirective = (function () { 22 | function ClickOutsideDirective(_elementRef) { 23 | this._elementRef = _elementRef; 24 | this.clickOutside = new core_1.EventEmitter(); 25 | } 26 | ClickOutsideDirective.prototype.onClick = function (event, targetElement) { 27 | if (!targetElement) { 28 | return; 29 | } 30 | var clickedInside = this._elementRef.nativeElement.contains(targetElement); 31 | if (!clickedInside) { 32 | this.clickOutside.emit(event); 33 | } 34 | }; 35 | __decorate([ 36 | core_1.Output(), 37 | __metadata('design:type', Object) 38 | ], ClickOutsideDirective.prototype, "clickOutside", void 0); 39 | __decorate([ 40 | core_1.HostListener('document:click', ['$event', '$event.target']), 41 | __metadata('design:type', Function), 42 | __metadata('design:paramtypes', [MouseEvent, HTMLElement]), 43 | __metadata('design:returntype', void 0) 44 | ], ClickOutsideDirective.prototype, "onClick", null); 45 | ClickOutsideDirective = __decorate([ 46 | core_1.Directive({ 47 | selector: '[clickOutside]' 48 | }), 49 | __metadata('design:paramtypes', [core_1.ElementRef]) 50 | ], ClickOutsideDirective); 51 | return ClickOutsideDirective; 52 | }()); 53 | exports_1("ClickOutsideDirective", ClickOutsideDirective); 54 | } 55 | } 56 | }); 57 | 58 | //# sourceMappingURL=clickOutside.directive.js.map 59 | -------------------------------------------------------------------------------- /clickOutside.directive.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["clickOutside.directive.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YAKA;gBACI,+BAAoB,WAAuB;oBAAvB,gBAAW,GAAX,WAAW,CAAY;oBAIpC,iBAAY,GAAG,IAAI,mBAAY,EAAc,CAAC;gBAHrD,CAAC;gBAMM,uCAAO,GAAd,UAAe,KAAiB,EAAE,aAA0B;oBACxD,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;wBACjB,MAAM,CAAC;oBACX,CAAC;oBAED,IAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;oBAC7E,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;wBACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAClC,CAAC;gBACL,CAAC;gBAbD;oBAAC,aAAM,EAAE;;2EAAA;gBAGT;oBAAC,mBAAY,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;;;;oEAAA;gBAVhE;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;qBAC7B,CAAC;;yCAAA;gBAmBF,4BAAC;YAAD,CAlBA,AAkBC,IAAA;YAlBD,yDAkBC,CAAA","file":"clickOutside.directive.js","sourcesContent":["import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';\n\n@Directive({\n selector: '[clickOutside]'\n})\nexport class ClickOutsideDirective {\n constructor(private _elementRef: ElementRef) {\n }\n\n @Output()\n public clickOutside = new EventEmitter();\n\n @HostListener('document:click', ['$event', '$event.target'])\n public onClick(event: MouseEvent, targetElement: HTMLElement): void {\n if (!targetElement) {\n return;\n }\n\n const clickedInside = this._elementRef.nativeElement.contains(targetElement);\n if (!clickedInside) {\n this.clickOutside.emit(event);\n }\n }\n}\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /clickOutside.directive.ts: -------------------------------------------------------------------------------- 1 | import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[clickOutside]' 5 | }) 6 | export class ClickOutsideDirective { 7 | constructor(private _elementRef: ElementRef) { 8 | } 9 | 10 | @Output() 11 | public clickOutside = new EventEmitter(); 12 | 13 | @HostListener('document:click', ['$event', '$event.target']) 14 | public onClick(event: MouseEvent, targetElement: HTMLElement): void { 15 | if (!targetElement) { 16 | return; 17 | } 18 | 19 | const clickedInside = this._elementRef.nativeElement.contains(targetElement); 20 | if (!clickedInside) { 21 | this.clickOutside.emit(event); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'), 4 | sourcemaps = require('gulp-sourcemaps'), 5 | typescript = require('gulp-typescript'), 6 | merge = require('merge2'); 7 | 8 | const project = typescript.createProject('./tsconfig.json', { 9 | typescript: require('typescript') 10 | }); 11 | 12 | gulp.task('build', () => { 13 | const result = project.src() 14 | .pipe(sourcemaps.init()) 15 | .pipe(typescript(project)); 16 | 17 | return merge([ 18 | result.dts.pipe(gulp.dest('.')), 19 | result.js 20 | .pipe(sourcemaps.write('.')) 21 | .pipe(gulp.dest('.')) 22 | ]); 23 | }); 24 | 25 | gulp.task('default', ['build']); 26 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | export { ClickOutsideDirective } from './clickOutside.directive'; 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | System.register(['./clickOutside.directive'], function(exports_1, context_1) { 2 | "use strict"; 3 | var __moduleName = context_1 && context_1.id; 4 | return { 5 | setters:[ 6 | function (clickOutside_directive_1_1) { 7 | exports_1({ 8 | "ClickOutsideDirective": clickOutside_directive_1_1["ClickOutsideDirective"] 9 | }); 10 | }], 11 | execute: function() { 12 | } 13 | } 14 | }); 15 | 16 | //# sourceMappingURL=index.js.map 17 | -------------------------------------------------------------------------------- /index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export {ClickOutsideDirective} from './clickOutside.directive'; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-click-outside", 3 | "version": "0.1.0", 4 | "description": "Outside-click directive for Angular 2", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/chliebel/angular2-click-outside.git" 12 | }, 13 | "keywords": [ 14 | "angular2", 15 | "ng2", 16 | "angular", 17 | "outside", 18 | "click", 19 | "directive" 20 | ], 21 | "author": "Christian Liebel", 22 | "license": "BSD-3-Clause", 23 | "bugs": { 24 | "url": "https://github.com/chliebel/angular2-click-outside/issues" 25 | }, 26 | "homepage": "https://github.com/chliebel/angular2-click-outside#readme", 27 | "devDependencies": { 28 | "@angular/core": "^2.0.0-rc.5", 29 | "gulp": "^3.9.1", 30 | "gulp-sourcemaps": "^1.6.0", 31 | "gulp-typescript": "^2.13.4", 32 | "merge2": "^1.0.2", 33 | "rxjs": "^5.0.0-beta.6", 34 | "typings": "^0.8.1", 35 | "zone.js": "^0.6.6" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false, 11 | "declaration": true 12 | }, 13 | "exclude": [ 14 | "node_modules", 15 | "typings/main", 16 | "typings/main.d.ts" 17 | ] 18 | } 19 | 20 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "ambientDependencies": { 3 | "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654" 4 | } 5 | } 6 | --------------------------------------------------------------------------------