title: JQuery UI Datepicker in angular2
body: <p><br/>
  I am new to Angular2.<br/>
  I am trying to implement JQuery ui datepicker in angular2.<br/></p>
  
  <p>I have written a datePicker directive, there i enabled datepicker. Here i am able to select date but finding difficulty to emit selected date to the parent component.</p>
  
  <p>to overcome this i created an object on window object and passing component reference to that object. from there i am calling component function.<br/></p>
  
  <p>I feel this is not a best practice to do.<br/></p>
  
  <p>Can someone help me to do in right way.</p>
  
  <pre><code>import { Directive, ElementRef, Input, NgZone,HostListener,Output,EventEmitter } from '@angular/core';
      declare  var $:any;
      @Directive({
        selector: '[uiDatePicker]',
       })
      export class UiDatePickerDirective {
        @Input('uiDatePicker') setDate: string;
        @Output() onSelectDate = new EventEmitter();  
        private el: HTMLElement;
        constructor(el: ElementRef,public zone:NgZone) {
          this.el = el.nativeElement;
  
          window.angularComponentRef = {
            zone: this.zone, 
            component: this
          };
        }
  
        doEmitDate(dateText:string){
            this.onSelectDate.emit(dateText);
        }
        ngOnInit() {
          $(this.el).datepicker({
           onSelect: function(dateText:string) {
              window.angularComponentRef.component.doEmitDate(dateText);
           }
          });
         }
  }
  </code></pre>
  
  <p>Here i dont like to use <strong>window.angularComponentRef.component</strong> object. As it is just storing the reference in global object. this is not good for an application.</p>