I am currently working on an Angular 9 application and have integrated the materialize-css 1.0 library to incorporate a modal within my project. Everything works smoothly in terms of opening and instantiating the modal. However, I have encountered an issue with getting the confirm and close buttons inside the modal to recognize the methods defined in my .ts file.
file.component.ts
@ViewChild('modal', { static: false }) modalElement: ElementRef;
myModal = null;
...
ngAfterViewInit() {
this.myModal = new M.Modal(this.modalElement.nativeElement, {});
}
openModal() {
this.myModal.open();
}
closeModal() {
this.myModal.close();
}
confirmModal() {
...some logic
}
file.component.html
<div id="modal" class="modal" #myModal>
...
<button onclick="confirmModal()">confirm</button>
</div>
Upon clicking the confirm button within the open modal, I encounter a reference error:
confirmModal is not defined at HTMLButtonElement.onclick