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
An Angular output lets a component or directive notify its consumer that something happened. For new code, declare an output with output(), call its emit() method, and handle it in a parent template with ($event). The older @Output() and EventEmitter API remains supported.
Declare and emit an output with output()
Import output from @angular/core and initialize an output property in a component or directive. The generic type describes the emitted value, so a string output can be declared as output<string>(). The function returns an OutputEmitterRef<T>.
import { output } from '@angular/core';
export class ChildComponent {
itemAdded = output<string>();
addItem() {
this.itemAdded.emit('book');
}
}Call emit(value) when the component needs to notify its consumer. Angular’s tutorial documents this child-to-parent pattern of declaring a typed output and emitting a value: Component output properties tutorial.
Listen in a parent template and read the payload
Bind to the output using Angular’s event-binding syntax. The emitted value is available in the handler as $event.
#1 Best Overall
<app-child (itemAdded)="addItem($event)" />Here, the string emitted by the child becomes the argument passed to the parent’s addItem handler. The binding name must match the output’s public template name exactly, including capitalization.
Choose the API for your codebase
| Situation | Use | What to know |
|---|---|---|
| Declaring an output in new code | output<T>() |
Angular recommends this function-based API. Its API reference marks it stable since v19.0; Angular says it was introduced in v17.3 and became production-ready in v19. See the output API reference and migration guide. |
| Maintaining an existing output | @Output() valueChanged = new EventEmitter<number>() |
The decorator-based API remains supported. EventEmitter extends RxJS Subject and exposes Subject APIs; OutputEmitterRef has a narrower output-focused interface. See Angular’s EventEmitter API reference. |
Use the API supported by the Angular version in your project. output() is intended for component or directive property initializers and is recognized by Angular’s compiler; it is not a general-purpose event helper to call elsewhere.
Name outputs for the events they represent
Prefer concise camelCase names that describe what happened, such as valueChanged or panelClosed. Angular output names are case-sensitive. Avoid names that collide with native DOM events, such as click, and avoid an on prefix.
An alias lets the template-facing name differ from the TypeScript property name. For example, changed = output({alias: 'valueChanged'}) is referenced in a template as (valueChanged), while code in the class refers to this.changed. The decorator API also supports aliases, and a component’s outputs metadata can expose inherited properties or aliases. Use aliases when compatibility or a genuine naming need justifies the extra indirection, not as a default.
Rank #3
Subscribe to outputs on dynamically created components
When code creates a component dynamically, it can subscribe through the instance’s output property:
componentRef.instance.someEventProperty.subscribe(value => {
// Handle the emitted value.
});Angular cleans up the subscription when the component is destroyed. Call the subscription’s unsubscribe() method if it should stop earlier. The Angular outputs guide documents both template listening and programmatic subscriptions.
Angular outputs are not bubbling DOM events
A component output is an Angular event binding mechanism; it does not bubble through the DOM. A listener attached to an ancestor element will not receive a descendant component’s output through ordinary DOM event bubbling. Bind to the component that declares the output, or pass the notification onward through your component structure.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Angular Elements is a separate case. When an Angular component is converted into a custom element, its outputs are dispatched as HTML Custom Events, and the emitted value is available on the event’s detail property. See the Angular Custom Elements guide.
Migrate legacy outputs carefully
Angular provides a schematic that can convert many @Output() members to output(). Run the documented command from the project directory:
ng generate @angular/core:output-migrationThe schematic does not mean every legacy use should be changed automatically; review the migration results and handle cases that require manual attention. Check the output migration guide for the supported migration details.
Quick Recap
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
