Angular binds DOM events to component methods using parentheses around the event name in a template — the same syntax pattern applies whether the event is a click, a keystroke, or a focus change, so once you know the pattern you can bind almost any native DOM event.
The core syntax
<button (click)="onSave()">Save</button>The event name in parentheses matches the native DOM event name (click, keyup, blur, and so on) — Angular isn't inventing new event names, it's binding to the browser's own events.
Accessing the event object
<input (keyup)="onKeyUp($event)">onKeyUp(event: KeyboardEvent) {
console.log(event.key, (event.target as HTMLInputElement).value);
}$event is Angular's template variable for the native event object — pass it explicitly whenever the handler needs details about the event itself, not just the fact that it happened.
Common events on form inputs
<input (keydown)="onKeyDown($event)">
<input (keyup.enter)="onEnter()">
<input (blur)="onBlur()">
<input (focusout)="onFocusOut()">
<select (change)="onSelectionChange($event)">(keyup.enter) is a key-filtering shortcut — appending .enter (or .escape, .tab, and other key names) to a keyboard event only fires the handler for that specific key, instead of firing on every keystroke and checking event.key manually inside the handler.
blur vs focusout — the real difference
Both fire when an element loses focus, but blur does not bubble (it won't trigger a handler bound higher up in a parent that's listening for blur on a child), while focusout does bubble. If you need to detect focus leaving a group of nested elements from a single handler on the container, focusout is the one that actually works for that case — blur only fires for the exact element it's bound to.
Two-way binding as an alternative for simple form fields
For the common case of just keeping a variable in sync with an input's value, [(ngModel)] often replaces a manual (keyup) handler entirely:
<input [(ngModel)]="searchTerm">Reach for explicit event binding when you need to react to the event itself (run validation on every keystroke, detect a specific key, distinguish blur from focusout) — use ngModel when you just need the current value kept in sync with a variable.