Access an IMasked date-input field's value in Angular17

I am using iMask.js on my input field in an Angular17 project. I have a date input field, and I am using this mask to display a placeholder. The problem is, that I cannot access the masked object's value. I can access the input field's value, but the 2 are different. When I try to delete the typed-in masked value with an x button, then I cannot get a hold of this value, I can only delete it with the backspace button, but I would like to remove it with the button click.

Can someone please help, how should I update my code so that it edits directly the masked input element's value?

<input
class="form-control"
[imask]="imaskDate"
#input>

<button
*ngIf="date"
(click)="onClear()">X
</button>


@ViewChild('input') input;
date: Date;

imaskDate = {
mask: Date,
pattern: 'd.`m.`Y',
blocks: {
d: {
mask: IMask.MaskedRange,
from: 1,
to: 31,
maxLength: 2,
},
m: {
mask: IMask.MaskedRange,
from: 1,
to: 12,
maxLength: 2,
},
Y: {
mask: IMask.MaskedRange,
from: 1900,
to: 9999,
}
},
lazy: true,
overwrite: true
};

onClear() {
this.input.nativeElement.value = '';
}

Continue reading...