ADD directive output to know when the component close

Author: Antoine WEBER

app/directive-test.component.ts

@@ -10,7 +10,7 @@ moment['locale']('en-ca'); //e.g. fr-ca
 var templateStr = `
   <div id="my-div">
     <h1>Ng2 DateTime Picker Test</h1>
-    
+
     <fieldset id="test1"><legend><h2>Open from a button</h2></legend>
       <ng2-utils-1>
         <input [(ngModel)]="date1" />
@@ -22,11 +22,11 @@ var templateStr = `
       date1: {{date1}}
       <pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
     </fieldset>
-    
+
     <fieldset id="test2"><legend><h2>min date, max date, disabled dates</h2></legend>
       <ng2-utils-2>
         <input
-          [(ngModel)]="date2" 
+          [(ngModel)]="date2"
           ng2-datetime-picker
           [disabled-dates]="date2DisabledDates"
           [min-date]="date2MinDate"
@@ -37,37 +37,38 @@ var templateStr = `
       <a href="javascript:void(0)" (click)="myDate=defaultValue">set myDate</a><br/>
       <pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
     </fieldset>
-     
+
     <fieldset id="test3"><legend><h2>time only</h2></legend>
       <ng2-utils-4>
         <input [(ngModel)]="date3"
-          ng2-datetime-picker 
+          ng2-datetime-picker
           date-format="DD-MM-YYYY hh:mm"
           time-only="true"
           minute-step="5"
+          (popupClosed)="doOnClose($event)"
           close-on-select="false" />
       </ng2-utils-4>
       <pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
     </fieldset>
-   
+
     <fieldset id="test4"><legend><h2>with timezone</h2></legend>
       <ng2-utils-6>
-        <input 
-          [(ngModel)]="date4" 
+        <input
+          [(ngModel)]="date4"
           ng2-datetime-picker
           [date-format]="date4TimezoneFormat" />
           dateWithTimezone: {{dateWithTimezone}}
         <br/>
       </ng2-utils-6>
       <pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
     </fieldset>
-   
+
     <fieldset id="test5"><legend><h2>Reactive form</h2></legend>
       <ng2-utils-3>
         <form [formGroup]="myForm">
-            <input 
+            <input
               required
-              formControlName="date" 
+              formControlName="date"
               ng2-datetime-picker
               close-on-select="false"/>
         </form>
@@ -76,7 +77,7 @@ var templateStr = `
         <br/>myForm.dirty: {{myForm.dirty}}
         <br/>myForm.controls.date.dirty: {{myForm.controls.date.dirty}}
         <br/>
-        <a href="javascript:void()" 
+        <a href="javascript:void()"
           (click)="myForm.controls.date.patchValue('2015-06-30')">
           2015-06-30
         </a>
@@ -91,7 +92,7 @@ var templateStr = `
       </ng2-utils-3>
       <pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
     </fieldset>
-    
+
   </div>
 `;
 
@@ -136,4 +137,8 @@ export class DirectiveTestComponent {
     //moment.tz.setDefault('US/Central'); // Set the default timezone that moment will use
   }
 
+  private doOnClose(event:boolean){
+    alert(" Do something on close ");
+  }
+
 }

src/ng2-datetime-picker.directive.ts

@@ -48,6 +48,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
   @Input('ngModel')        ngModel: any;
   @Output('ngModelChange') ngModelChange = new EventEmitter();
   @Output('valueChanged')  valueChanged  = new EventEmitter();
+  @Output('popupClosed')  popupClosed  = new EventEmitter();
 
   private el: HTMLInputElement;                               /* input element */
   private ng2DatetimePickerEl: HTMLElement;                      /* dropdown element */
@@ -233,7 +234,7 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
     component.closing$.subscribe(() => {
       this.closeOnSelect !== "false" && this.hideDatetimePicker();
     });
-    
+
     //Hack not to fire tab keyup event
     this.justShown = true;
     setTimeout(() => this.justShown = false, 100);
@@ -246,19 +247,21 @@ export class Ng2DatetimePickerDirective implements OnInit, OnChanges {
 
   hideDatetimePicker = (event?):void => {
     if (this.componentRef) {
-      if (  /* invoked by clicking on somewhere in document */
-        event &&
+      if (
+        /* invoked by clicking on somewhere in document */
+        (event &&
         event.type === 'click' &&
         event.target !== this.el &&
-        !this.elementIn(event.target, this.ng2DatetimePickerEl)
+        !this.elementIn(event.target, this.ng2DatetimePickerEl))
+        || 
+        /* invoked by function call */
+        !event
       ) {
         this.componentRef.destroy();
         this.componentRef = undefined;
-      } else if (!event) {  /* invoked by function call */
-        this.componentRef.destroy();
-        this.componentRef = undefined;
+        this.popupClosed.emit(true);
       }
-    event && event.stopPropagation();  
+      event && event.stopPropagation();
     }
   };