How to turn a keyup event into a click button using angular-CodePudding

I have a input field with a working keyup event, and I need to turn the icon into a button, so when the user clicks on it, it applies the filter. This is my HTML:

<input type="text"
 matInput
 (keyup)="applyFilterOrgReach($event.target.value, countries, 500)"
 (keydown)="$event.stopPropagation()"/>
  <i ></i>

And my component.ts:

applyFilterOrgReach(filterValue: string, values: MatTableDataSource<any[]>, debounceTime: number) {
    this.organizationReachSearchParam = filterValue.trim().toLocaleLowerCase();
    setTimeout(() => {
      if (filterValue === null) {
        values.filter = '';
      } else {
        values.filter = this.organizationReachSearchParam;
      }
      this.globalRegions = this.getGlobalRegions(this.countries.filteredData);
    }, debounceTime);
  }

CodePudding user response：

You can pass the input value in click event and use the existing method in ts same as yours.

<input type="text"
     matInput #input
     (keydown)="$event.stopPropagation()"/>
      <i  (click)="applyFilterOrgReach(input.value, countries, 500)"></i>