Autofocus input modal doesn't work inside Ng-Datepicker

Question

consider the following StackBlitz, I'm developing an angular application 6 with Ng-Bootstrap and I have the following problem:

I have two components: the modal component and the calendar component. the modal component has an input that when the modal starts, the input is auto-focused. When I call my modal component from a button, the input auto-focus perfectly. The problem occurs when the modal component is called from the calendar component, that is, the modal component is inside the calendar component. When selecting a calendar date, the modal is opened but the entry is not auto-focused. My question is why when the modal component is called from the calendar component, the input does not auto-focus, but I do call my modal component from a button if it works. What is the explanation for this behavior?

Many thanks!

Answer 1

Try Using Life cycle hook AfterViewChecked:

DEMO

ngAfterViewChecked() {
    this.elementRef.nativeElement.focus();
  }