Why does the X button not clear and refresh the field when clicked, but using backspace does? I want it to clear when the X button is clicked.
<mat-form-field appearance="standard" fxFill>
<mat-label style="font-size: 12px;">Filter users by name, company or title</mat-label>
<input matInput #searchTransactionUserInput placeholder="" (keyup)="applyFilter($event)">
<button mat-button *ngIf="searchTransactionUserInput" matSuffix mat-icon-button aria-label="Clear"
(click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
#typescript code
clearSearch() {
console.log("clear")
this.searchTransactionUserInput.nativeElement.value = '';
this._transactionUserPageEvent();
}