The input event fires whenever editable input content changes. In an Angular template, its $event value is a browser-created InputEvent whose target represents the triggering HTMLInputElement. section 13.2.1
Use the event binding to move changing input data into application state:
- Read the element value with $event.target.value; Angular may require $any($event) because it types $event as the more general Event interface. section 13.2.1
- Expect immediate updates because the event fires for every content change; choose a more selective keyboard event when updates are expensive. section 13.2.3
- Combine the input event with a value property binding to synchronize an input element with component state and other bindings. section 13.3
Updating selected product text
An input can update a signal whenever its contents change: <input class="form-control" (input)="selectedProduct.set($any($event).target.value)" />. Pairing this with [value]="selectedProduct() ?? ''" makes the element reflect changes made elsewhere, such as selecting a product by mouseover. section 13.2.1 section 13.3
Listing 13.10. Creating a two-way binding in the template.html file in the src/app folder
<div class="p-2">
<div class="bg-info text-white p-2">
Selected Product: {{ selectedProduct() ?? '(None)' }}
</div>
<table class="table table-sm table-bordered">
<tr *ngFor="let item of products(); let i = index"
[class.bg-info]="getSelected(item)">
<td (mouseover)="selectedProduct.set(item.name)">{{i + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<div class="form-group">
<label>Product Name</label>
<input class="form-control"
(input)="selectedProduct.set($any($event).target.value)"
[value]="selectedProduct() ?? ''" />
</div>
<div class="form-group">
<label>Product Name</label>
<input class="form-control"
(input)="selectedProduct.set($any($event).target.value)"
[value]="selectedProduct() ?? ''" />
</div>
</div>
Shows a complete Angular template combining input-event handling, value binding, a selected-product signal, and synchronized displays. section 13.3
