Angular Change Detection

Visualize how Angular's Top-Down Change Detection traverses the component tree. Click a component to simulate a local event, see how markForCheck() flags the path, and watch the tick() cycle execute.

Controls

OnPush Strategy
Marked Dirty path
Currently Checking

Inspection Log

Logs will appear here...

AppComponent

Default
Click to fire event

HeaderComponent

OnPush
Click to fire event

MainComponent

Default
Click to fire event

ListComponent

Default
Click to fire event

ItemComponent

OnPush
Click to fire event

ItemComponent

OnPush
Click to fire event

SidebarComponent

OnPush
Click to fire event