@Output decorator with EventEmitter in Angular - Performance & Optimization

Performance: @Output decorator with EventEmitter

MEDIUM IMPACT

This affects interaction responsiveness and event handling efficiency between Angular components.

Communicating data from child to parent component using @Output and EventEmitter

Angular

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: `<button (click)="emitEvent()">Click</button>`
})
export class ChildComponent {
  @Output() dataChange = new EventEmitter<number>();
  private lastEmittedTime = 0;

  emitEvent() {
    const now = Date.now();
    if (now - this.lastEmittedTime > 1000) { // throttle events
      this.dataChange.emit(now);
      this.lastEmittedTime = now;
    }
  }
}

Throttling event emissions reduces unnecessary change detection and event handling, improving responsiveness.

📈 Performance GainReduces event emissions by limiting frequency, lowering CPU usage and improving INP.

Communicating data from child to parent component using @Output and EventEmitter

Angular

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: `<button (click)="emitEvent()">Click</button>`
})
export class ChildComponent {
  @Output() dataChange = new EventEmitter<any>();

  emitEvent() {
    // Emitting event with new object every click
    this.dataChange.emit({ time: Date.now() });
  }
}

Emitting a new object on every click causes Angular to run change detection and update parent unnecessarily, increasing CPU usage.

📉 Performance CostTriggers multiple change detection cycles and event handler executions per click, increasing INP latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Emit event every click with new object	Multiple parent updates	Multiple reflows per event	High paint cost due to frequent updates	[X] Bad
Throttle event emissions to reduce frequency	Fewer parent updates	Single or fewer reflows	Lower paint cost	[OK] Good

Rendering Pipeline

When @Output emits an event, Angular triggers change detection in parent components, which may cause DOM updates and re-rendering if data changes.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection stage is most expensive due to event-triggered checks and potential DOM updates.

Core Web Vital Affected

INP

This affects interaction responsiveness and event handling efficiency between Angular components.

Optimization Tips

1Avoid emitting new object references on every event to prevent unnecessary change detection.

2Throttle or debounce event emissions to improve interaction responsiveness.

3Use Angular's OnPush change detection strategy in parent components to reduce re-rendering.

Performance Quiz - 3 Questions

What is a common performance issue when using @Output with EventEmitter in Angular?

A Emitting events too frequently causing excessive change detection

B Not using @Input to pass data to child components

C Using EventEmitter without importing it

D Declaring @Output without a selector

DevTools: Performance

How to check: Record a performance profile while interacting with the child component button. Look for frequent change detection cycles and event handler calls.

What to look for: High number of change detection invocations and long scripting times indicate inefficient event emissions.