Note: While my question may seem similar to others, the specifics are different.
I am attempting to execute a function on an element that is contained within a <ng-template>. Due to the fact that it is not rendered in the DOM, I am encountering difficulties. Upon researching, I discovered that it is feasible to use ViewChild. Here is my attempt:
HTML:
<ng-template #Payment>
<input type="text" id="price">
</ng-template>
My approach to accessing the #Payment component is as follows:
@ViewChild('Payment', {read: ElementRef}) Payment: ElementRef;
Subsequently, my attempt to implement the function goes like this:
ngAfterViewInit() {
this.Payment.nativeElement.querySelector('#price').addEventListener("keyup", function() {
mask(this);
});
}
Unfortunately, I am encountering the following error:
ERROR TypeError: this.Payment.nativeElement.querySelector is not a function
Now, my question is: how can I successfully apply this function to the element?
The objective is to apply a mask to this input field, which is housed within a modal inside <ng-template>. It should be noted that the function works as expected when the input is not contained within <ng-template>.