title: Blur not working - Angular 2
body: <p>I'm trying to set a blue event in angular 2 like so:</p>
  
  <pre><code>&lt;div id="area-button" (blur)="unfocusAreaInput()" class="form-group" (click)="focusAreaInput()"&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
  import { GoogleplaceDirective } from 'angular2-google-map-auto-complete/directives/googleplace.directive';
  
  @Component({
      selector: 'my-area',
      directives: [GoogleplaceDirective],
      templateUrl: 'app/find-page/area-picker.component.html',
      styleUrls: ['app/find-page/area-picker.component.css']
  })
  export class AreaComponent {
      public address: Object;
      @ViewChild('areaInput') areaInput;
      areaSelected: boolean = false;
      @Output() onAreaSelected = new EventEmitter&lt;boolean&gt;();
      @Output() onAreaDeselected = new EventEmitter&lt;boolean&gt;();
  
      constructor(el: ElementRef) { }
      getAddress(place: Object) {
          this.address = place['formatted_address'];
          var location = place['geometry']['location'];
          var lat = location.lat();
          var lng = location.lng();
          console.log("Address Object", place);
      }
  
      focusAreaInput() {
          this.areaInput.nativeElement.focus();
          this.onAreaSelected.emit(true);
      }
  
          unfocusAreaInput() {
          this.onAreaSelected.emit(false);
      }
  }
  </code></pre>
  
  <p>unfocusAreaInput() never gets executed. Why?</p>