Child to parent communication flow in Angular - Performance & Optimization

Performance: Child to parent communication flow

MEDIUM IMPACT

This affects interaction responsiveness and rendering updates when child components send data or events to parent components.

Passing data or events from a child component to its parent

Angular

import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: `<button (click)="clicked.emit()">Click</button>` })
export class ChildComp {
  @Output() clicked = new EventEmitter<void>();
}

// Parent template: <child-comp (clicked)="parentMethod()"></child-comp>

Using @Output with EventEmitter leverages Angular's event system, minimizing change detection overhead and avoiding passing function references.

📈 Performance GainReduces unnecessary change detection cycles and reflows, improving interaction responsiveness.

Passing data or events from a child component to its parent

Angular

import { Component, Input } from '@angular/core';
@Component({ selector: 'child-comp', template: `<button (click)="notifyParent()">Click</button>` })
export class ChildComp {
  @Input() parentCallback!: () => void;
  notifyParent() {
    this.parentCallback();
  }
}

// Parent template: <child-comp [parentCallback]="parentMethod"></child-comp>

Passing functions via @Input causes Angular to treat the function as a new reference on each change detection, triggering unnecessary re-renders and change detection cycles.

📉 Performance CostTriggers multiple change detection cycles and can cause unnecessary reflows if parent updates heavy DOM.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing function via @Input	Triggers parent and child change detection	Multiple reflows if parent updates DOM	Higher paint cost due to unnecessary updates	[X] Bad
Using @Output EventEmitter	Triggers minimal change detection scoped to parent	Single reflow if DOM changes	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

When a child component emits an event, Angular triggers change detection starting from the parent component, updating the DOM only if necessary.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection can be expensive if many components re-check unnecessarily.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering updates when child components send data or events to parent components.

Optimization Tips

1Use @Output EventEmitter for child-to-parent communication to limit change detection scope.

2Avoid passing functions as @Input to prevent unnecessary re-renders.

3Monitor change detection cycles in DevTools Performance panel to identify inefficiencies.

Performance Quiz - 3 Questions

Which Angular pattern minimizes unnecessary change detection when a child notifies its parent?

A Directly modifying parent variables from child

B Passing a callback function via @Input

C Using @Output with EventEmitter

D Using a shared service with BehaviorSubject

DevTools: Performance

How to check: Record a performance profile while interacting with the child component event. Look for change detection cycles and layout recalculations.

What to look for: Excessive change detection or layout thrashing indicates inefficient child-to-parent communication.