Log the number of change detections in Angular (Globally)

Question

I need to see how many change detection cycles are running in my app ( and who initiated it) - which has many many components.

Currently , I know that , at each component , I can use the ngDoCheck method :

• ngDoCheck()

Detect and act upon changes that Angular can't or won't detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

This is not a bad solution.

Question:

But - is there a way to do it globally ? I mean , I really don't want to modify each component and add this code.

Is there a way that the "listener & Logger" will be in a global scope so that i'll know which part of my app causes many change detection cycles?

My goal (if possible) :

(console.log) -- from component A
(console.log) -- from component A
(console.log) -- from component A

(console.log) -- from component B

(console.log) -- from component C
(console.log) -- from component C

Answer 1

AfterViewChecked should help you:

Respond after Angular checks the component's views and child views / the view that a directive is in. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

If you implement AfterViewChecked in your AppComponent, it should fire every time any change happens in any of the child components:

ngAfterViewChecked() {
    console.trace();
}