Web background
Dennis, Kiya | 14.8.2023

Visually Understanding Change Detection: Let It Blink

Web > Visually Understanding Change Detection: Let It Blink

Ever wondered how Change Detection gets triggered? To represent this visually, you can use the so-called "Blink Method".

To do so, insert the following code into the component that you want to test and add "{{ blink() }}" into the component's template:

1private element = inject(ElementRef);
2
3    private zone = inject(NgZone);
4
5    blink(): void {
6        // Dirty Hack used to visualize the change detector
7        // let originalColor = this.element.nativeElement.firstChild.style.backgroundColor;
8        this.element.nativeElement.firstChild.style.backgroundColor = 'crimson';
9        //              ^----- DOM-Element
10
11        this.zone.runOutsideAngular(() => {
12            setTimeout(() => {
13                this.element.nativeElement.firstChild.style.backgroundColor = 'white';
14            }, 1000);
15        });
16    }

This will visually indicate when the Change Detection gets triggered, enabling you to see the exact moments of Change Detection in your Angular applications.

Content
  • What triggers change detection?
  • How can you visually represent change detection?
  • What is the Blink method?
  • How can you apply the Blink method into an existing component?
Dennis Hundertmark
Dennis (Softwareentwickler)

... ist ein begeisterter Frontendentwickler aus Hannover. Am liebsten arbeitet er mit TypeScript und am allerliebsten mit Angular. Schnelles, effizientes Arbeiten und saubere Testabdeckung liegen ihm... mehr anzeigen

Gitlab
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund