¿Cómo vincular un evento con Angular 2 (4, 5, 6, 7) para el icono de cruz de un <input type="search"> ? ¿Qué evento se activa?
Buscando una solución como (que no sea (buscar) porque no funciona en IE):
<input type="search" (click)="search()">Pregunta adicional: ¿Cuál es el nombre oficial de este icono de cruz? ¿Es un poco difícil buscar en Google/duckduckgoing para una solución cuando no conoce los términos correctos?
Pregunta duplicada: ¿Cómo detecta la limpieza de una entrada HTML5 de "búsqueda"?
<input type="search" (search)="search()">
Hay varias formas de vincular el evento de búsqueda con el componente
1) Usar evento de cambio
<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. //(ie It fires only when the content changes and mean while enter is pressed)2) Usando el evento de búsqueda
<input type="search" class="form-control" placeholder="Search" (search)="onSearchCustomer($event)"> // This event is fired whenever enter is pressed.(ie without caring about the change of content)3) Usando el evento keyup
<input type="search" class="form-control" placeholder="Search" (keyup)="onSearchCustomer($event)"> // This event is fired on every key press4) Usando el evento keyup.enter
<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 pressedAhora en su archivo de componentes
onSearchCustomer(event: any) { console.log(event.target.value); }¡Espero que esto te ayude a ti o a alguien más!
<input type="search" placeholder="Search for text" #searchInput (keyup)="search(searchInput.value)" (search)="search()">