Campus Design System

Appearance

Change Detection Issues bij LIT Elements in Angular ​

Inleiding ​

Angular's change detection systeem is een krachtig mechanisme dat automatisch de UI bijwerkt wanneer data verandert. Echter, bij het integreren van LIT elements (webcomponenten) in Angular applicaties kunnen er subtiele maar kritieke problemen ontstaan met change detection, vooral in combinatie met DOM-manipulatie zoals Angular CDK's drag & drop functionaliteit.

Deze gids verkent de diepliggende oorzaken van change detection issues bij LIT elements, waarom ze optreden, en hoe je robuuste oplossingen kunt implementeren voor je DCR components.

Angular's Change Detection Systeem ​

Hoe Change Detection Werkt ​

Angular's change detection draait op een cyclus die wordt getriggerd door verschillende events:

typescript
// Triggers voor change detection:
// 1. DOM events (click, keyup, etc.)
// 2. HTTP responses
// 3. Timers (setTimeout, setInterval)
// 4. Promises en Observables
// 5. Handmatige triggers (ChangeDetectorRef.detectChanges())

@Component({
  selector: 'app-example',
  template: `
    <div>{{ counter }}</div>
    <button (click)="increment()">+</button>
  `,
})
export class ExampleComponent {
  counter = 0;

  increment() {
    this.counter++; // Change detection detecteert deze wijziging automatisch
  }
}

Zone.js en Automatic Change Detection ​

Angular gebruikt Zone.js om asynchrone operaties te 'patchen' en change detection te triggeren:

javascript
// Zone.js patcht deze functions
setTimeout(() => {
  // Na afloop wordt change detection getriggerd
}, 1000);

// HTTP requests triggeren ook change detection
http.get('/api/data').subscribe((data) => {
  // Change detection wordt automatisch getriggerd
});

// Event listeners worden automatisch gepatchet
button.addEventListener('click', () => {
  // Change detection wordt getriggerd
});

Component Tree en Change Detection ​

Change detection werkt top-down door de component tree:

AppComponent (root)
├── HeaderComponent
├── SidebarComponent
└── MainComponent
    ├── ProductListComponent
    │   └── ProductItemComponent (DCR component gebruiker)
    └── FooterComponent

Wanneer change detection loopt, controleert Angular elk component in de tree voor wijzigingen.

Webcomponents en Change Detection ​

Het Probleem met Custom Elements ​

LIT elements zijn echte webcomponenten (custom elements) die buiten Angular's change detection systeem opereren:

typescript
// Dit is een LIT element - Angular kent zijn interne state niet
@customElement('dcr-counter')
export class DcrCounter extends LitElement {
  @state()
  private count = 0; // Angular ziet deze wijzigingen NIET

  private increment() {
    this.count++; // Geen Angular change detection trigger
    // LIT's eigen reactivity systeem werkt wel
  }

  render() {
    return html`
      <div>Count: ${this.count}</div>
      <button @click=${this.increment}>+</button>
    `;
  }
}

Angular Component Referenties ​

Angular houdt referenties bij naar DOM elementen in zijn component tree:

typescript
@Component({
  selector: 'app-file-manager',
  template: `
    <div class="file-list">
      <dcr-file-item
        *ngFor="let file of files; trackBy: trackByFileId"
        [filename]="file.name"
        [extension]="file.ext"
      ></dcr-file-item>
    </div>
  `,
})
export class FileManagerComponent {
  files = [
    { id: '1', name: 'document.pdf', ext: 'pdf' },
    { id: '2', name: 'image.jpg', ext: 'jpg' },
  ];

  trackByFileId(index: number, file: any): string {
    return file.id; // Angular gebruikt dit voor element tracking
  }
}

Angular creëert een mapping:

javascript
// Intern Angular element tracking
{
  'file-1': <dcr-file-item>,  // DOM referentie
  'file-2': <dcr-file-item>   // DOM referentie
}

CDK Drag & Drop en Change Detection Issues ​

Het DOM Manipulation Probleem ​

Wanneer Angular CDK drag & drop een element verplaatst, gebeurt er het volgende:

typescript
// Wat er gebeurt tijdens een drag & drop operatie:

// 1. Drag Start
const draggedElement = document.querySelector('dcr-file-item[data-id="1"]');
const placeholder = document.createElement('div');

// 2. Element Removal (DOM manipulation buiten Angular om)
draggedElement.parentNode.removeChild(draggedElement);
draggedElement.parentNode.insertBefore(placeholder, nextSibling);

// 3. Move Operation
targetContainer.insertBefore(draggedElement, targetPosition);

// 4. Angular's change detection weet NIET dat deze DOM wijzigingen zijn gebeurd

Verlies van Component References ​

Hier wordt het problematisch. Angular verliest zijn interne referenties:

typescript
@Component({
  template: `
    <div
      cdkDropList
      (cdkDropListDropped)="onDrop($event)"
    >
      <dcr-file-item
        *ngFor="let file of files; trackBy: trackByFileId"
        [filename]="file.name"
        [extension]="file.ext"
        cdkDrag
      ></dcr-file-item>
    </div>
  `
})
export class DragDropFileManager {
  files = [...];

  onDrop(event: CdkDragDrop<any[]>) {
    moveItemInArray(this.files, event.previousIndex, event.currentIndex);

    // Op dit punt:
    // 1. De files array is bijgewerkt
    // 2. Angular's change detection wordt getriggerd
    // 3. Maar het DOM element is al verplaatst door CDK
    // 4. Angular probiert property bindings opnieuw in te stellen
    // 5. Maar het element is mogelijk 'detached' van Angular's tracking
  }
}

Race Conditions ​

Er ontstaan race conditions tussen CDK's DOM manipulatie en Angular's change detection:

javascript
// Timeline van events:

// T0: User start drag
//     ↓ CDK neemt controle over DOM element

// T1: Element wordt uit DOM verwijderd door CDK
//     ↓ Angular heeft nog steeds referenties naar het element

// T2: Element wordt op nieuwe positie geplaatst door CDK
//     ↓ DOM is bijgewerkt, maar Angular weet dit niet

// T3: onDrop() handler wordt aangeroepen
//     ↓ Angular data wordt bijgewerkt

// T4: Change detection loopt
//     ↓ Angular probeert property bindings bij te werken
//     ↓ Maar element referenties zijn mogelijk stale

// T5: Property bindings falen
//     ↓ UI toont verouderde of missende data

Specifieke Problemen met LIT Elements ​

Property Binding Failures ​

typescript
// Scenario: file-explorer component met drag & drop
@Component({
  template: `
    <dcr-file-icon
      [icon]="'file-types:' + file.extension"
      [size]="iconSize"
      [color]="getFileColor(file)"
    ></dcr-file-icon>
  `,
})
export class FileExplorerComponent {
  file = { extension: 'pdf', type: 'document' };
  iconSize = 'large';

  getFileColor(file: any): string {
    // Deze methode wordt aangeroepen tijdens change detection
    return file.type === 'document' ? 'blue' : 'gray';
  }
}

Na drag & drop kan dit falen omdat:

  1. Element referentie is verloren: Angular kan de property bindings niet bijwerken
  2. Timing issues: Change detection loopt voordat het element stabiel is
  3. Stale bindings: Properties zijn ingesteld op een oude versie van het element

Event Binding Disruption ​

typescript
@Component({
  template: `
    <dcr-file-item
      (file-select)="onFileSelect($event)"
      (file-delete)="onFileDelete($event)"
      (file-rename)="onFileRename($event)"
    ></dcr-file-item>
  `,
})
export class FileManagerComponent {
  onFileSelect(event: CustomEvent) {
    // Deze event handlers kunnen worden 'detached'
    // na DOM manipulatie door CDK
  }
}

Oplossingsstrategieën ​

1. OnPush Change Detection Strategy ​

Verminder de impact van change detection issues door expliciet te controleren wanneer updates nodig zijn:

typescript
@Component({
  selector: 'app-optimized-file-manager',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div cdkDropList (cdkDropListDropped)="onDrop($event)" class="file-list">
      <dcr-file-item
        *ngFor="let file of files; trackBy: trackByFileId"
        [filename]="file.name"
        [attr.filename]="file.name"
        [extension]="file.extension"
        [attr.extension]="file.extension"
        [file-id]="file.id"
        cdkDrag
      ></dcr-file-item>
    </div>
  `,
})
export class OptimizedFileManagerComponent {
  @Input() files: FileItem[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  trackByFileId(index: number, file: FileItem): string {
    return file.id;
  }

  onDrop(event: CdkDragDrop<FileItem[]>) {
    moveItemInArray(this.files, event.previousIndex, event.currentIndex);

    // Handmatig change detection triggeren op het juiste moment
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 0);
  }
}

2. Zone.js Runouts voor CDK Operations ​

Voer CDK operaties uit buiten Angular's zone om interferentie te voorkomen:

typescript
import { NgZone } from '@angular/core';

@Component({
  selector: 'app-zone-aware-file-manager',
  template: `
    <div cdkDropList (cdkDropListDropped)="onDrop($event)">
      <!-- items -->
    </div>
  `,
})
export class ZoneAwareFileManagerComponent {
  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}

  onDrop(event: CdkDragDrop<FileItem[]>) {
    // Voer data updates uit buiten Angular's zone
    this.ngZone.runOutsideAngular(() => {
      // CDK heeft al DOM manipulatie gedaan
      // Nu veilig data updaten
      moveItemInArray(this.files, event.previousIndex, event.currentIndex);

      // Terug naar Angular zone voor change detection
      this.ngZone.run(() => {
        this.cdr.detectChanges();
      });
    });
  }
}

3. Element Recovery Strategy ​

Implementeer mechanismen om element referenties te herstellen:

typescript
@Component({
  selector: 'app-recovery-file-manager',
  template: `
    <div cdkDropList (cdkDropListDropped)="onDrop($event)" #dropList>
      <dcr-file-item
        *ngFor="let file of files; trackBy: trackByFileId"
        [filename]="file.name"
        [attr.filename]="file.name"
        [extension]="file.extension"
        [attr.extension]="file.extension"
        [attr.data-file-id]="file.id"
        cdkDrag
      ></dcr-file-item>
    </div>
  `,
})
export class RecoveryFileManagerComponent implements AfterViewInit {
  @ViewChild('dropList', { static: true }) dropList!: ElementRef;

  files: FileItem[] = [];
  private elementReferences = new Map<string, HTMLElement>();

  ngAfterViewInit() {
    this.rebuildElementReferences();
  }

  onDrop(event: CdkDragDrop<FileItem[]>) {
    const draggedFileId = this.getDraggedFileId(event);

    // Update data
    moveItemInArray(this.files, event.previousIndex, event.currentIndex);

    // Recovery strategy
    this.scheduleElementRecovery(draggedFileId);
  }

  private getDraggedFileId(event: CdkDragDrop<FileItem[]>): string {
    const draggedElement = event.item.element.nativeElement;
    return draggedElement.getAttribute('data-file-id') || '';
  }

  private scheduleElementRecovery(fileId: string) {
    // Wacht tot DOM stabiel is
    setTimeout(() => {
      this.rebuildElementReferences();
      this.reestablishBindings(fileId);
      this.cdr.detectChanges();
    }, 0);
  }

  private rebuildElementReferences() {
    this.elementReferences.clear();

    const fileElements = this.dropList.nativeElement.querySelectorAll('dcr-file-item');
    fileElements.forEach((element: HTMLElement) => {
      const fileId = element.getAttribute('data-file-id');
      if (fileId) {
        this.elementReferences.set(fileId, element);
      }
    });
  }

  private reestablishBindings(fileId: string) {
    const element = this.elementReferences.get(fileId);
    const file = this.files.find((f) => f.id === fileId);

    if (element && file) {
      // Handmatig properties resetten als backup
      (element as any).filename = file.name;
      (element as any).extension = file.extension;
      element.setAttribute('filename', file.name);
      element.setAttribute('extension', file.extension);
    }
  }
}

4. Reactive State Management ​

Gebruik reactive patterns om change detection issues te vermijden:

typescript
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-reactive-file-manager',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div cdkDropList (cdkDropListDropped)="onDrop($event)">
      <dcr-file-item
        *ngFor="let file of files$ | async; trackBy: trackByFileId"
        [filename]="file.name"
        [attr.filename]="file.name"
        [extension]="file.extension"
        [attr.extension]="file.extension"
        [selected]="file.selected"
        [attr.selected]="file.selected"
        cdkDrag
      ></dcr-file-item>
    </div>
  `,
})
export class ReactiveFileManagerComponent {
  private filesSubject = new BehaviorSubject<FileItem[]>([]);
  private dragOperationSubject = new BehaviorSubject<boolean>(false);

  files$ = combineLatest([this.filesSubject, this.dragOperationSubject]).pipe(
    map(([files, isDragging]) => {
      // Reactive updates die automatisch triggeren bij wijzigingen
      return files.map((file) => ({
        ...file,
        // Voeg metadata toe voor drag state
        isDragging: isDragging && file.id === this.currentDraggedId,
      }));
    })
  );

  private currentDraggedId: string | null = null;

  onDrop(event: CdkDragDrop<FileItem[]>) {
    const currentFiles = this.filesSubject.value;
    moveItemInArray(currentFiles, event.previousIndex, event.currentIndex);

    // Update via reactive stream
    this.filesSubject.next([...currentFiles]);
    this.dragOperationSubject.next(false);
    this.currentDraggedId = null;
  }

  onDragStart(fileId: string) {
    this.currentDraggedId = fileId;
    this.dragOperationSubject.next(true);
  }

  trackByFileId(index: number, file: FileItem): string {
    return file.id;
  }
}

5. LIT Element Self-Recovery ​

Implementeer recovery mechanismen in de LIT elements zelf:

typescript
// dcr-file-item.ts
import { LitElement, html, PropertyValues } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('dcr-file-item')
export class DcrFileItem extends LitElement {
  @property({ type: String })
  filename = '';

  @property({ type: String })
  extension = '';

  @property({ type: Boolean })
  selected = false;

  // Backup van laatste bekende state
  @state()
  private lastKnownState: {
    filename: string;
    extension: string;
    selected: boolean;
  } = {
    filename: '',
    extension: '',
    selected: false,
  };

  // Recovery timer
  private recoveryTimer?: number;

  connectedCallback() {
    super.connectedCallback();
    this.startRecoveryMonitoring();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.stopRecoveryMonitoring();
  }

  willUpdate(changedProperties: PropertyValues) {
    // Backup state bij elke update
    this.lastKnownState = {
      filename: this.filename,
      extension: this.extension,
      selected: this.selected,
    };
  }

  private startRecoveryMonitoring() {
    // Monitor voor data loss na DOM manipulatie
    this.recoveryTimer = window.setInterval(() => {
      this.checkAndRecoverState();
    }, 100);
  }

  private stopRecoveryMonitoring() {
    if (this.recoveryTimer) {
      clearInterval(this.recoveryTimer);
      this.recoveryTimer = undefined;
    }
  }

  private checkAndRecoverState() {
    // Check of properties zijn verloren gegaan
    const needsRecovery = !this.filename && this.lastKnownState.filename && this.hasAttribute('filename');

    if (needsRecovery) {
      console.warn('DCR File Item: Recovering lost properties');
      this.recoverFromAttributes();
    }
  }

  private recoverFromAttributes() {
    // Herstel properties van HTML attributes
    const filenameAttr = this.getAttribute('filename');
    const extensionAttr = this.getAttribute('extension');
    const selectedAttr = this.hasAttribute('selected');

    if (filenameAttr && !this.filename) {
      this.filename = filenameAttr;
    }

    if (extensionAttr && !this.extension) {
      this.extension = extensionAttr;
    }

    if (selectedAttr !== this.selected) {
      this.selected = selectedAttr;
    }

    // Trigger update
    this.requestUpdate();
  }

  render() {
    const displayFilename = this.filename || this.getAttribute('filename') || 'Unknown file';
    const displayExtension = this.extension || this.getAttribute('extension') || '';

    return html`
      <div class="file-item ${this.selected ? 'selected' : ''}">
        <dcr-icon icon="file-types:${displayExtension}"></dcr-icon>
        <span class="filename">${displayFilename}</span>
        <span class="extension">${displayExtension}</span>
      </div>
    `;
  }
}

Geavanceerde Debugging Technieken ​

Change Detection Monitoring ​

typescript
import { ApplicationRef, NgZone } from '@angular/core';

@Component({
  selector: 'app-debug-file-manager',
})
export class DebugFileManagerComponent implements OnInit, OnDestroy {
  private changeDetectionCount = 0;
  private originalTick: () => void;

  constructor(private appRef: ApplicationRef, private ngZone: NgZone) {
    // Patch ApplicationRef.tick om change detection te monitoren
    this.originalTick = this.appRef.tick.bind(this.appRef);
    this.appRef.tick = () => {
      console.log(`Change detection cycle #${++this.changeDetectionCount}`);
      console.trace('Change detection triggered by:');
      return this.originalTick();
    };
  }

  ngOnInit() {
    // Monitor zone.js operations
    this.ngZone.onUnstable.subscribe(() => {
      console.log('Zone became unstable - async operation started');
    });

    this.ngZone.onStable.subscribe(() => {
      console.log('Zone became stable - async operation completed');
    });
  }

  ngOnDestroy() {
    // Restore original tick
    this.appRef.tick = this.originalTick;
  }

  onDrop(event: CdkDragDrop<FileItem[]>) {
    console.log('Drop event triggered');
    console.log(
      'Before move:',
      this.files.map((f) => f.id)
    );

    moveItemInArray(this.files, event.previousIndex, event.currentIndex);

    console.log(
      'After move:',
      this.files.map((f) => f.id)
    );
    console.log('Waiting for change detection...');
  }
}

Element Reference Tracking ​

typescript
@Injectable()
export class ElementTrackingService {
  private trackedElements = new Map<string, ElementReference>();

  interface ElementReference {
    element: HTMLElement;
    component: any;
    lastUpdate: Date;
    propertyBindings: Map<string, any>;
  }

  trackElement(id: string, element: HTMLElement, component: any) {
    this.trackedElements.set(id, {
      element,
      component,
      lastUpdate: new Date(),
      propertyBindings: new Map()
    });
  }

  updateElementProperties(id: string, properties: Record<string, any>) {
    const tracked = this.trackedElements.get(id);
    if (tracked) {
      Object.entries(properties).forEach(([key, value]) => {
        tracked.propertyBindings.set(key, value);

        // Verify property was actually set
        if ((tracked.element as any)[key] !== value) {
          console.warn(`Property binding failed for ${id}.${key}:`, {
            expected: value,
            actual: (tracked.element as any)[key]
          });
        }
      });

      tracked.lastUpdate = new Date();
    }
  }

  detectStaleReferences(): string[] {
    const stale: string[] = [];
    const now = new Date();

    this.trackedElements.forEach((ref, id) => {
      // Check if element is still in DOM
      if (!document.contains(ref.element)) {
        stale.push(id);
        return;
      }

      // Check if properties are out of sync
      ref.propertyBindings.forEach((expectedValue, propertyName) => {
        const actualValue = (ref.element as any)[propertyName];
        if (actualValue !== expectedValue) {
          console.warn(`Stale property detected for ${id}.${propertyName}:`, {
            expected: expectedValue,
            actual: actualValue,
            lastUpdate: ref.lastUpdate
          });
        }
      });
    });

    return stale;
  }
}

Best Practices ​

1. Defensive Programming ​

typescript
@Component({
  selector: 'app-defensive-file-manager',
  template: `
    <dcr-file-item
      [filename]="file.name"
      [attr.filename]="file.name"
      [extension]="file.extension"
      [attr.extension]="file.extension"
      [attr.data-file-id]="file.id"
      [attr.data-last-update]="getTimestamp()"
    ></dcr-file-item>
  `,
})
export class DefensiveFileManagerComponent {
  getTimestamp(): string {
    return Date.now().toString();
  }

  onDrop(event: CdkDragDrop<FileItem[]>) {
    try {
      moveItemInArray(this.files, event.previousIndex, event.currentIndex);

      // Defensive change detection
      this.safeChangeDetection();
    } catch (error) {
      console.error('Drop operation failed:', error);
      this.recoverFromError();
    }
  }

  private safeChangeDetection() {
    // Multiple strategies for ensuring change detection

    // Strategy 1: Immediate
    this.cdr.detectChanges();

    // Strategy 2: Next tick
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 0);

    // Strategy 3: Animation frame
    requestAnimationFrame(() => {
      this.cdr.detectChanges();
    });
  }

  private recoverFromError() {
    // Rebuild component state from DOM
    this.rebuildStateFromDOM();
    this.cdr.detectChanges();
  }
}

2. Testing Change Detection Issues ​

typescript
// file-manager.component.spec.ts
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ChangeDetectionStrategy, DebugElement } from '@angular/core';

describe('FileManagerComponent Change Detection', () => {
  let component: FileManagerComponent;
  let fixture: ComponentFixture<FileManagerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [FileManagerComponent],
      imports: [DragDropModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    });

    fixture = TestBed.createComponent(FileManagerComponent);
    component = fixture.componentInstance;
  });

  it('should maintain property bindings after drag and drop', fakeAsync(() => {
    // Setup initial state
    component.files = [{ id: '1', name: 'test.pdf', extension: 'pdf' }];
    fixture.detectChanges();

    // Get reference to DCR element
    const dcrElement = fixture.debugElement.query(By.css('dcr-file-item')).nativeElement;

    // Verify initial property binding
    expect(dcrElement.filename).toBe('test.pdf');
    expect(dcrElement.extension).toBe('pdf');

    // Simulate drag and drop DOM manipulation
    const parent = dcrElement.parentElement;
    parent.removeChild(dcrElement);

    // Simulate CDK moving the element
    tick(0);
    parent.appendChild(dcrElement);

    // Trigger change detection
    fixture.detectChanges();
    tick(0);

    // Verify properties are restored
    expect(dcrElement.filename).toBe('test.pdf');
    expect(dcrElement.extension).toBe('pdf');

    // Also check attributes as fallback
    expect(dcrElement.getAttribute('filename')).toBe('test.pdf');
    expect(dcrElement.getAttribute('extension')).toBe('pdf');
  }));

  it('should handle rapid change detection cycles', fakeAsync(() => {
    component.files = [{ id: '1', name: 'test.pdf', extension: 'pdf' }];

    // Simulate rapid updates
    for (let i = 0; i < 10; i++) {
      component.files[0].name = `test-${i}.pdf`;
      fixture.detectChanges();
      tick(0);
    }

    const dcrElement = fixture.debugElement.query(By.css('dcr-file-item')).nativeElement;

    expect(dcrElement.filename).toBe('test-9.pdf');
  }));
});

Conclusie ​

Change detection issues bij LIT elements in Angular zijn complexe problemen die voortkomen uit de fundamentele verschillen tussen Angular's change detection systeem en webcomponent architectuur. Door een diep begrip van deze systemen en de implementatie van robuuste recovery strategieën, kun je betrouwbare DCR components bouwen die correct functioneren in alle scenario's.

Belangrijkste strategieën:

  1. OnPush Change Detection: Gebruik expliciete change detection controle
  2. Zone Management: Beheer timing van updates met NgZone
  3. Element Recovery: Implementeer mechanismen om verloren referenties te herstellen
  4. Reactive Patterns: Gebruik reactive state management om timing issues te vermijden
  5. Defensive Programming: Implementeer fallback strategieën en error recovery
  6. Comprehensive Testing: Test change detection scenarios expliciet

Door deze principes toe te passen, kun je robuuste Angular applicaties bouwen die naadloos samenwerken met DCR components, zelfs in complexe drag & drop scenarios.