In my current project, the use of ElementRef's nativeelement.value is essential due to some persistent readonly errors happening only in my custom directive.
export class DeliveryAcrossDirective {
@Input('key') key: string;
@Input('component') component: string;
constructor(
private store: Store,
private elementRef: ElementRef<HTMLInputElement>
) {
this.key = '';
this.component = '';
}
@HostListener('change') onChange() {
console.log('noticed something');
this.store.dispatch<IAction<IAdjust>>({
type: RDX_DELIVERY_ACROSS_ADJUST,
payload: {
key: this.key,
value: this.elementRef.nativeElement.value
},
component: this.component
})
}
}
However, I have encountered a problem where my directive does not capture the change event from a mat select.
<mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async">
<mat-label>
{{ country | async }}
</mat-label>
<mat-select [formControl]="countryFormControl"
appDeliveryAcross
[key]="'iso'"
[component]="'delivery-across'" >
<mat-option *ngFor="let language of (languages | async)" [value]="language.value">
{{ language.country }}
</mat-option>
</mat-select>
</mat-form-field>
On the contrary, classic inputs work perfectly fine with capturing the change event as shown below:
<mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async">
<input matInput
[formControl]="minFormControl"
[errorStateMatcher]="errorStateMatcher"
placeholder="Minimaal"
appDeliveryAcross
[key]="'min'"
[component]="'delivery-across'"
type="number">
</mat-form-field>
If anyone has insights on how to successfully capture the change event from a mat select using a directive, please share your knowledge!