Angular event binding for input (type="search") cross icon?

Question

How to bind an event with Angular 2 (4, 5, 6, 7) for the cross icon of an <input type="search">? Which event gets triggered?

Looking for a solution like (other than (search) because it does not work in IE):

<input type="search" (click)="search()">

Additional question: What's the official name of this cross icon? Kinda hard googling/duckduckgoing for a solution when not knowing the right terms?

Duplicate Question: How do you detect the clearing of a "search" HTML5 input?

Answer 1

 <input type="search" (search)="search()">

Answer 2

There are multiple ways of binding the search event with component

1) Using change event

<input type="search" class="form-control" placeholder="Search" (change)="onSearchCustomer($event)">
// This event get fired when you type something and hit enter, but if you 
// again hit enter without adding a new input it won't get fired. 
//(i.e It fires only when the content changes and mean while enter is pressed)

2) Using search event

<input type="search" class="form-control" placeholder="Search" (search)="onSearchCustomer($event)">
// This event is fired whenever enter is pressed.(i.e without caring about the change of content)

3) Using keyup event

<input type="search" class="form-control" placeholder="Search" (keyup)="onSearchCustomer($event)">
// This event is fired on every key press

4) Using keyup.enter event

<input type="search" class="form-control" placeholder="Search" (keyup.enter)="onSearchCustomer($event)">
// This event is similar to search event which only fires when enter is pressed

Now in your Component file

onSearchCustomer(event: any) {
   console.log(event.target.value);
}

Hope this will help you or somebody else!