Btukfyl

I am using this Tiny Date Picker library to implement a range datepicker, I am using the NgZone, to run it outside the angular, using the runOutsideAngular() method, now I want to implement a blur event handler, so that when I click outside the calender the picker closes, but the angular is not firing the function when the div is blured because it is not detecting any changes as it is running outside the angular, any ideas for this?

my html

  <div type="text" class="sp-datepicker-input" tabindex="1" (blur)='closeDatePicker()' [class.sp-datepicker-inputopen]="modalRangeOpen">

     <div class="sp-datepicker-calendar"></div>

  </div>

my ts.

ngAfterViewInit() {

this.zone.runOutsideAngular(() => {

  const input = document.querySelector('sp-datepicker .sp-datepicker-input');

  let eventType = 'select';

  if (this.range) {

    this.datePicker = DateRangePicker(input, {

      startOpts: this.options,

      endOpts: this.to_options

    });

    eventType = 'statechange';

  } else {

    this.datePicker = TinyDatePicker(input, this.options);

  }

  this.datePicker.on(eventType, (_, picker) => {

    let date = picker.state.selectedDate;



    if (this.range) {

      date = {

        start: picker.state.start,

        end: picker.state.end

      };

    }

    // here i am using the .run() method to capture the values,

    this.zone.run(() => {

      this.start_value = date.start;

      this.end_value = date.end;

      this.onChange(date);

    });

    return date;

  });

});

}

   closeDatePicker() {

    this.modalRangeOpen = false;

   }

This workaround did the trick

      body.addEventListener('click', event => {

       let isDatepicker = false;

       event['path'].forEach(item => {

        if (item.nodeName === 'SP-DATEPICKER') {

         isDatepicker = true;

        }

       });



      if (!isDatepicker) {

        this.zone.run(() => {

          this.closeDatePicker();

        });

      }

     });