A browser event reports an occurrence to a handler. In an Angular template, an event binding such as `(input)` runs an expression when the browser triggers that event. The template variable `$event` provides the browser’s Event object, including the element that triggered it. section 13.2.1
Table 13.3. The properties common to all DOM event objects
|
Name
|
Description
|
|
type
|
This property returns a
string
that identifies the type of event that has been triggered.
|
|
target
|
This property returns the
object
that triggered the event, which will generally be the object that represents the HTML element in the DOM.
|
|
timeStamp
|
This property returns a
number
that contains the time that the event was triggered, expressed as milliseconds since January 1, 1970.
|
The shared Event properties identify the event type, its target, and when it occurred. More specific event objects provide details beyond these common properties. section 13.2.1
Read an input event
An input can update a signal with `(input)="selectedProduct.set($any($event).target.value)"`. The browser supplies an InputEvent whose target is the input element, but Angular checks `$event` as the more general Event type. `$any` permits access to `value` by disabling type checking for that expression. section 13.2.1
To keep type checking, pass the event to a component method with `(input)="handleInputEvent($event)"`. The method accepts an `Event`, checks `ev.target instanceof HTMLInputElement`, and only then reads `ev.target.value` to update the signal. section 13.2.2
Choose when a handler should run. `(input)` responds as content changes; `(keyup)` responds when a key is released. A binding such as `(keyup.enter)` waits for Enter, avoiding an application-state update on every keystroke. section 13.2.3
Emit and receive a custom event
A directive can respond to a host element’s DOM click by calling `this.click.emit(this.product.category)` on an `EventEmitter<string>` exposed through `@Output("pa-category")`. A template binding, `(pa-category)="newProduct.category = $event"`, receives the emitted category. Here `$event` is a string, not the browser’s click Event object. section 14.4 section 14.4.1
