Angular 2 Click Outside

import { Component } from '@angular/core';
import { ChildComponent} from './child.component';
import { DropdownComponent} from './dropdown.component';

@Component({
  selector: 'my-app',
  template: `
    <div style="width: 100%; height: 400px; background: red; cursor: pointer;">
      <child-cmp></child-cmp>
    </div>
    
    <div style="margin: 20px 0 0;">
      <dropdown-cmp></dropdown-cmp>
    </div>
  `,
  directives: [ChildComponent, DropdownComponent]
})
export class AppComponent { }

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Click Outside</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

(function(global) {
  var ngVer = '@2.0.0-rc.1';

  var map = {
    'app': 'app',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api'
  };

  var packages = {
    'app': {
      main: 'main.ts',
      defaultExtension: 'ts'
    },
    'rxjs': {
      defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
      defaultExtension: 'js'
    },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/upgrade',
  ];
  
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });
  
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = {
      main: 'index.js',
      defaultExtension: 'js'
    };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }
  
  if (global.filterSystemConfig) {
    global.filterSystemConfig(config);
  }

  System.config(config);

})(this);

import { Component } from '@angular/core';
import { ClickOutside } from './click-outside.directive';

@Component({
  selector: 'child-cmp',
  template: `
    <div style="width: 200px; height: 200px; background: blue; color: white; cursor: pointer;" click-outside (clickOutside)="onClickOutside($event)">
      <p>
        Output: {{ msg }}
      </p>
    </div>
  `,
  directives: [ClickOutside]
})
export class ChildComponent {
  private msg:string;
  
  onClickOutside(event:Object) {
    if(event && event['value'] === true) {
      this.msg = 'clicked outside';
    } else {
      this.msg = 'clicked inside';
    }
  }
}

import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';

@Directive({
  selector: '[click-outside]'
})

export class ClickOutside implements OnInit, OnDestroy {
  private listening:boolean;
  private globalClick:Observable<MouseEvent>;

  @Output('clickOutside') clickOutside:EventEmitter<Object>; 

  constructor(private _elRef:ElementRef) {
    this.listening = false;
    this.clickOutside = new EventEmitter();
  }

  ngOnInit() {
    this.globalClick = Observable
      .fromEvent(document, 'click')
      .delay(1)
      .do(() => {
        this.listening = true;
      }).subscribe((event:MouseEvent) => {
        this.onGlobalClick(event);
      });
  }
  
  ngOnDestroy() {
    this.globalClick.unsubscribe();
  }

  onGlobalClick(event:MouseEvent) {
    if (event instanceof MouseEvent && this.listening === true) {
      if(this.isDescendant(this._elRef.nativeElement, event.target) === true) {
        this.clickOutside.emit({
          target: (event.target || null),
          value: false
        });
      } else {
        this.clickOutside.emit({
          target: (event.target || null),
          value: true
        });
      }
    }
  }

  isDescendant(parent, child) {
    let node = child;
    while (node !== null) {
      if (node === parent) {
        return true;
      } else {
        node = node.parentNode;
      }
    }
    return false;
  }
}

import { Component } from '@angular/core';
import { ClickOutside } from './click-outside.directive';

@Component({
  selector: 'dropdown-cmp',
  template: `
    <div style="position: relative; display: inline-block;" click-outside (clickOutside)="onClickOutside($event)">
      <button (click)="active=!active">Toggle dropdown</button>
      <div *ngIf="active" style="width: 200px; padding: 10px; top: 100%; left: 0; position:absolute; background: yellow;">
        This is drop down menu
      </div>
    </div>
  `,
  directives: [ClickOutside]
})
export class DropdownComponent {
  private active:boolean = false;
  
  onClickOutside(event:Object) {
    if(event && event['value'] === true) {
      this.active = false;
    }
  }
}