Every native DOM event — click, key presses, focus changes, selection changes — binds in Angular through the exact same parenthesized syntax, differing only in which specific event name is used and what the handler does with the $event object.
The click event
The blur event (fires when an element loses focus)
validateEmail(): void {
this.emailError = this.email.includes('@') ? '' : 'Enter a valid email.';
}blur is genuinely useful for validation feedback that shouldn't interrupt the user while they're still actively typing — showing the error only once the user has moved on to another field feels less intrusive than validating on every keystroke.
The focusout event, as a bubbling alternative to blur
Unlike blur, which doesn't bubble, focusout does — binding it on a parent container fires when focus leaves any child element within it, useful for validating an entire form section as a whole rather than one field at a time.
Keyboard events: keydown, keyup, and keypress
onKeyDown(event: KeyboardEvent): void {
console.log('Key down:', event.key);
}keydown fires before the character is actually inserted (useful for intercepting or preventing a keystroke), keyup fires after the key is released (useful for reacting to the final input value), and keypress — deprecated in modern browsers in favor of the other two — fires only for character-producing keys.
Detecting the Enter key specifically
Angular's pseudo-event syntax (keyup.enter) is a convenient shorthand for checking event.key === 'Enter' manually inside a generic (keyup) handler — genuinely simpler for the common case of triggering an action specifically on the Enter key.
The change event on a select or checkbox
onCategoryChange(event: Event): void {
const value = (event.target as HTMLSelectElement).value;
this.selectedCategory = value;
}Casting event.target to the specific element type (HTMLSelectElement here) is necessary in TypeScript to access element-specific properties like .value — the generic EventTarget type on a raw DOM event doesn't expose them directly.
Combining event binding with template reference variables
Referencing a template variable (#searchBox) directly in the event binding avoids needing [(ngModel)] two-way binding at all for a simple case like this — the current input value is read directly from the DOM element reference at the moment the event fires.
Why $event carries different data depending on the event type
$event is always the native browser event object — its actual shape depends entirely on which event fired: a KeyboardEvent for keyboard events (with a .key property), a generic Event for change events (requiring a cast to read .target.value), and so on — Angular doesn't wrap or normalize these differently from vanilla JavaScript.