In angular-imask how do I use imaskElement attribute?

Question

I'm trying to find a way to access the imask object in Angular. I saw this attribute

[imaskElement]="(elementRef, directiveRef) => maskElement" <!-- default = elementRef.nativeElement -->

but when I try to connect it to a property in my component it doesn't work. Angular can't find elementRef and directiveRef properties in the component.

I tried to connect it to this property:

@ViewChild('MyDatePicker') myDatePicker: ElementRef;

this way:

(...)
[imaskElement]="(elementRef, directiveRef) => datePickerElement" />

Also if I try to access the default element as stated in the documentation it doesn't work. When I try this:

myDatePicker.nativeElement.updateValue() 

I get this error:

ERROR TypeError: Cannot read properties of undefined (reading 'updateValue')

How can I correctly direct imaskElement attribute to a property of my component ?

Answer 1

You have to write a function with that declaration that returns the input method I believe. ie.

component.ts

getElementInput = function(elementRef: ElementRef<any>, directiveRef: any): MaskElement {
    return elementRef.nativeElement.getInputElement();  // how to get the input element will vary
}

component.html

<special-input [imaskElement]="getElementInput"></special-input>