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.