How to auto hide bsDatepicker on scroll in ng-template of modal

I want bsDatepicker can auto-hide on scroll inside modal which wraps by ng-template.

It's the same problem as https://github.com/valor-software/ngx-bootstrap/issues/5390

But I still can't solve my problem.

There's my code: https://stackblitz.com/edit/angular-ivy-2swahw

Thanks

Your problem may be due to the scroll event not happening on the window, rather it is appearing on a div instead.

I played around with the stackblitz that you created and here is, what worked for me.

  constructor(private modalService: BsModalService) {
    window.addEventListener('scroll', this.hideDialog, true);
  }

  hideDialog = (): void => {
    this.datepicker.hide();
  };

I recommend that you read the answers here, it will help You make your code more robust and increase UI performance.

How to handle window scroll event in Angular 4?