DOM-Lebenszyklus-Überwachung mittels ElementRef MutationObserver-Direktive

import { Directive, ElementRef, inject, DestroyRef, NgZone } from '@angular/core';
 
@Directive({ selector: '[appDomAudit]', standalone: true })
export class DomAuditDirective {
  private el = inject(ElementRef);
  private ngZone = inject(NgZone);
  private destroyRef = inject(DestroyRef);
 
  constructor() {
    this.ngZone.runOutsideAngular(() => {
      const observer = new MutationObserver(records => console.log('DOM Mutation detected:', records.length));
      observer.observe(this.el.nativeElement, { childList: true, subtree: true });
      this.destroyRef.onDestroy(() => observer.disconnect());
    });
  }
}