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

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

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!

<input type="search" placeholder="Search for text" #searchInput (keyup)="search(searchInput.value)" (search)="search()">