14.8.2023

Change Detection visuell sehen, let it blink

Wie wird die Change Detection ausgelöst? Um dies visuell darzustellen, kann man die sogenannte "Blink-Methode" verwenden.

Fügen Sie dazu den folgenden Code in die zu testende Komponente ein und fügen Sie "{{ blink() }}" in das Template der Komponente ein:

private element = inject(ElementRef);

    private zone = inject(NgZone);

    blink(): void {
        // Dirty Hack used to visualize the change detector
        // let originalColor = this.element.nativeElement.firstChild.style.backgroundColor;
        this.element.nativeElement.firstChild.style.backgroundColor = 'crimson';
        //              ^----- DOM-Element

        this.zone.runOutsideAngular(() => {
            setTimeout(() => {
                this.element.nativeElement.firstChild.style.backgroundColor = 'white';
            }, 1000);
        });
    }
Dennis

Softwareentwickler

Gitlab
Zur Übersicht

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund