I'm currently working with a component that has a modal feature. The modal is enclosed within an <ng-template> element.
<ng-template #modalm let-modal>
...
<button type="button" (click)="onSubmit()" class="btn btn-primary">OK</button>
...
</ng-template>
With this setup, I have the ability to open and close the modal directly from my component.ts file.
constructor(private modalService: NgbModal,
private activeModal: NgbActiveModal)
...
public openModal(modalm: TemplateRef<any>){
this.activeModal = this.modalService.open(modalm);
const btn = modalm.elementRef.nativeElement.querySelector('.btn-primary');
}
Now, I am trying to access the button element within the modal and set a property on it. I tried using the solution provided in the response of How do I find Element inside TemplateRef, which involves calling querySelector on modalm.elementRef.nativeElement. However, I encountered an error:
TypeError: modalm.elementRef.nativeElement.querySelector is not a function
I'm puzzled as to why I am unable to execute querySelector in this scenario.
I am aware that I need to use the TemplateRef type because of the ng-template wrapping. Can someone guide me on the correct syntax for accessing an element within the modal?