← All notes

Answer: Angular components can define custom events by assigning a property to the output function. The function returns an OutputEmitterRef. You emit an event by calling emit on that ref. Outputs are like native browser events such as click, except Angular custom events do not bubble up the DOM.

Rules

Output names are case-sensitive. When you extend a component class, the child class inherits the outputs. The output function has special meaning to the Angular compiler. You can call it only in component and directive property initializers.

You can pass event data to emit. In a template listener, that data is available as $event. When creating a component dynamically, you can programmatically subscribe to output events. The OutputRef type includes a subscribe method.

In source

output declares Angular outputs in directives and components. Parents can subscribe through a template event binding, such as (myOutput)="doSomething($event)", or through OutputRef#subscribe. You emit values with the emit method on OutputEmitterRef.

See also

• angular-inputs
• angular-components

Claims

• id: C1 claim: The output function returns an OutputEmitterRef. source: S1 evidence: "The output function returns an OutputEmitterRef."

• id: C2 claim: Angular custom events do not bubble up the DOM. source: S1 evidence: "Angular custom events do not bubble up the DOM."

• id: C3 claim: output declares outputs in directives and components. source: S2 evidence: "The output function allows declaration of Angular outputs in"

• id: C4 claim: Emit values with emit on OutputEmitterRef. source: S2 evidence: "the emit method from OutputEmitterRef."

Sources

• [S1] Component outputs. Angular docs. https://angular.dev/guide/components/outputs . License: CC BY 4.0. Accessed 2026-11-11.

• [S2] output() function. Angular source. https://github.com/angular/angular/blob/main/packages/core/src/authoring/output/output.ts . License: MIT. Accessed 2026-11-11.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Angular documentation (angular/angular adev): Copyright (c) 2010-2026 Google LLC; CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Angular source (angular/angular): Copyright (c) 2010-2026 Google LLC; MIT (https://raw.githubusercontent.com/angular/angular/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_7f62295s,
  author = {{iinventedlight}},
  title = {{Angular component outputs raise custom events to a parent}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-11},
  url = {https://iinventedlight.com/library/notes/angular-outputs/},
  note = {Permanent ID iil:note:7f62295s. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/angular-outputs.md.