Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Handle a browser event in an Angular template by putting its name in parentheses: <button (click)="save()">. Pass $event when the handler needs event details. For a component’s own event, declare an output and emit a value; for events on a component or directive host, use the host property.
Listen for browser events in a template
Angular’s event binding syntax is (eventName)="statement". When the event occurs on that element, Angular runs the statement. For example:
<button (click)="save()">Save</button>Use $event to pass the browser’s event object to a component method. It is available in every template listener:
<input (input)="updateName($event)">The value is the event object, not automatically the input’s text. In a TypeScript handler, read the target value as appropriate for that event and element.
#1 Best Overall
Handle keys and browser defaults
Filter keyboard events
Angular supports key modifiers such as .enter and combinations such as .shift.enter:
<input (keydown.enter)="submit()">Use .code when the listener should match a physical or virtual key code rather than the character value. KeyboardEvent.key can vary with keyboard layout and modifiers; KeyboardEvent.code identifies the key position/code. Choose based on whether the interaction is about the character entered or the key itself.
Replace a default browser action
If a handler replaces an element’s normal browser behavior—for example, submitting a form or following a link—call event.preventDefault() explicitly:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<a href="/next" (click)="openInPanel($event)">Open in panel</a>The handler can call preventDefault() on the received event when it intends to suppress navigation. Angular also calls it if a listener expression evaluates to false, but an explicit call makes the intent clear.
Rank #3
Send a component event to its parent
A component output is for component-to-parent communication, not a native browser event. For new output declarations, Angular recommends the output() function. Emit a typed value with .emit(), then receive it in the parent template through $event:
import { Component, output } from '@angular/core';
@Component({
selector: 'app-save-button',
template: '<button (click)="saved.emit(true)">Save</button>'
})
export class SaveButton {
saved = output<boolean>();
}<app-save-button (saved)="handleSaved($event)"></app-save-button>Choose an output name that does not collide with a native DOM event. Angular recommends camelCase names without an on prefix. Output names are case-sensitive. Unlike native DOM events, Angular custom outputs do not bubble through the DOM.
Keep existing EventEmitter outputs
@Output() with EventEmitter remains supported, so existing components do not need to be rewritten just to use outputs. Angular recommends output() for new code; its API is documented as stable since Angular v19.0.
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-legacy-save-button',
template: '<button (click)="saved.emit(true)">Save</button>'
})
export class LegacySaveButton {
@Output() saved = new EventEmitter<boolean>();
}Listen on a component or directive host
For an event on the element hosting a component or directive, Angular’s API documentation recommends the host property. It can also target supported global objects using prefixes such as window:, document:, or body:.
@Component({
selector: 'app-dismissable-panel',
template: '<ng-content></ng-content>',
host: {
'(window:click)': 'onWindowClick($event)'
}
})
export class DismissablePanel {
onWindowClick(event: Event) {
// Handle the window click.
}
}@HostListener remains available for backwards compatibility, but the API reference says to prefer host for new host listeners.
Quick Recap
Choose the right event mechanism
| Need | Use | What it does |
|---|---|---|
| Respond to a browser event on a template element | (eventName)="handler($event)" |
Runs a statement for the event; $event provides its event object. |
| Notify a parent of a component-specific action | output<T>() |
Emits a typed value that the parent receives as $event; it does not bubble. |
| Preserve an existing decorator-based output | @Output() name = new EventEmitter<T>() |
Still supported; publish values with .emit(). |
| Listen on a component or directive host | host metadata |
Registers a host listener, including supported global targets such as window:. |
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
