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);
});
}
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund