Get a reference to a element nested inside a modal - ng-bootstrap

Question

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: https://stackblitz.com/edit/angular-s8dtmm-8gqgus (The 2nd console for datePicker is undefined)
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
}
}
Template:
<ng-template #content let-modal>
<input ngbDatepicker #dp="ngbDatepicker">
<button class="calendar" (click)="dp.toggle()">Date picker</button>
</ng-template>
<button(click)="open()">Open modal</button>

Answer 1

If you can modify your example so that the modal content is a separate component (i.e. based on this example rather than this one) then you should be able to access the datePicker component in the open() method. I have created a launch-modal.component which defines the "Open" button and logs out the value of dp when the modal is opened:
launch-modal.component.html
<button class="btn btn-outline-primary" (click)="open()">Open modal</button>
launch-modal.component.ts
import { Component, ElementRef } from '#angular/core';
import { NgbActiveModal, NgbModal } from '#ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
#Component({
selector: 'launch-modal-component',
templateUrl: './launch-modal.component.html'
})
export class LaunchModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(ModalComponent);
console.log('dp', modalRef.componentInstance.datePicker);
}
}
I've then defined a modal.component.ts that defines the modal content (this is based on the app.module.html in your question, and defines a ViewChild for the datePicker):
modal.component.ts
import { Component, ElementRef, ViewChild } from '#angular/core';
import { NgbActiveModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'modal-component',
template: `
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<input ngbDatepicker #dp="ngbDatepicker">
<button class="btn btn-outline-primary calendar" (click)="dp.toggle()" type="button">Date picker</button>
`
})
export class ModalComponent {
#ViewChild('dp') datePicker: ElementRef;
constructor(public activeModal: NgbActiveModal) {}
}
The output of the console when the modal is opened is:
Please see this Stackblitz for a working demo.