Diagnosing Angular's Change Detection Cost with a Custom Profiling Directive

import { Directive, inject, ElementRef, DoCheck, Input } from '@angular/core';
 
@Directive({
  selector: '[cdProfiler]',
  standalone: true,
})
export class CdProfilerDirective implements DoCheck {
  @Input('cdProfiler') label = 'unlabeled';
 
  private readonly el = inject(ElementRef<HTMLElement>);
  private checkCount = 0;
  private lastLogTime = 0;
 
  // DoCheck fires on EVERY change detection pass touching this host,
  // even when no binding actually changed -- unlike ngOnChanges.
  ngDoCheck(): void {
    this.checkCount++;
    const now = performance.now();
 
    if (now - this.lastLogTime > 2000) {
      console.warn(
        `[cdProfiler:${this.label}] ${this.checkCount} checks in ` +
          `the last ${((now - this.lastLogTime) / 1000).toFixed(1)}s`
      );
      this.el.nativeElement.style.outline =
        this.checkCount > 50 ? '2px solid red' : '';
      this.checkCount = 0;
      this.lastLogTime = now;
    }
  }
}