title: Get a reference to a element nested inside a modal
body: <p>I'm trying to get a reference to an element nested inside a modal. While using @ViewChild works for the modal, its not working for any nested elements. eg: the datePicker in the code below. Working demo here: <a href="https://stackblitz.com/edit/angular-s8dtmm-8gqgus" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-s8dtmm-8gqgus</a> (The 2nd console for datePicker is undefined)</p>
  
  <pre><code>export class AppComponent {
    @ViewChild('content') modal: ElementRef;
    @ViewChild('dp') datePicker: ElementRef;
  
    constructor(private modalService: NgbModal) {}
  
    open() {
      this.modalService.open(this.modal);
      console.log('modal', !!this.modal); // ref to #content
      console.log('dp', this.datePicker); // undefined
    }
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;ng-template #content let-modal&gt;
    &lt;input ngbDatepicker #dp="ngbDatepicker"&gt;
    &lt;button class="calendar" (click)="dp.toggle()"&gt;Date picker&lt;/button&gt;
  &lt;/ng-template&gt;
  &lt;button(click)="open()"&gt;Open  modal&lt;/button&gt;
  </code></pre>