An event binding tells Angular what to do when an HTML element sends an event. Write the event name in parentheses on the element, followed by an expression: `(click)="removeProduct()"`. When the button is clicked, Angular evaluates the expression and calls the component method. The method can change application data, and the displayed content updates to reflect that change. section 13.2 section 10.2.1
Read a binding from the element inward:
- The host element supplies the event; `(mouseover)` or `(click)` names the event to handle. section 13.2
- The expression runs when the event occurs. Unlike an expression that only displays data, it can call a method or assign a value. section 13.2
- Use parentheses, not square brackets: the bracket shape determines the kind of binding. section 13.0
Select a product on hover
A table cell can use `(mouseover)="selectedProduct.set(item.name)"`. Moving the pointer over a row sets a writable signal to that row’s product name. Interpolation displays the new selection; a class binding can also highlight the selected row. section 13.2
Listing 13.3. Using the event 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><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
<tr *ngFor="let item of products(); let i = index">
<td (mouseover)="selectedProduct.set(item.name)">{{i + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
See the complete template for the hover binding alongside the interpolation that displays its result. section 13.2
An expression can also use data from the element or the browser event. For a to-do input, `#todoText` names the element so a button can run `(click)="addItem(todoText.value); todoText.value = ''"`: it passes the entered text to a component method, then clears the input. To read the triggering event instead, use `$event`. An input example uses `(input)="selectedProduct.set($any($event).target.value)"`; `$any` gets around template type checking that does not expose the input element’s `value` through the general event target type. section 2.8 section 13.2.1
Use an event binding when an event should trigger a specific action. For an input that must stay synchronized with a component property in both directions, `[(ngModel)]` offers a two-way binding instead. It combines event and property binding behavior and requires Angular’s forms module. section 13.3.1
