Angular 9 display number of change detection cycles on the UI? stackblitz inside

Question

I'm trying to build a small dev component that displays only in non-production builds.

One of the things that I see useful to keep track of is the number of change detection cycles that I'm triggering as I'm adding various functionality to make sure I'm not doing something that's really unperformant. like having mouseover and mouseout events on the menu icon to change its color.

Sadly I can't seem to get it to actually display on the view and not just in the console.

Stackblitz here.

You'll be able to hover over a button that triggers change detection cycles and you can see in your browser console, not the stackblitz console, a counter for how many times that getter is recalculated.

The simplified code to catch the essence of it:

    public changes = 0;

    public get changeDetection(): boolean {
        console.count("CHANGES");
        this.changes = +1;
        return true;
    }

and then in the html template:

<div>{{ changes }}</div>
<div>
    {{ changeDetection }}
</div>

Trying to manually trigger change detection with ChangeDetector ref will result in maximum call stack error.

Trying to switch change detection strategy to Default doesn't make it display either.

I know this is in many ways against desired functionality and requires some backwards work around the framework to get this going -- but I'd still like to give it a shot.

Thanks!

Answer 1

For everyone visiting this question not looking for a self made solution: The Angular DevTools Profiler can be used to show the number of CD cycles and in addition also show what was the source of each CD cycle and which components have been checked.

In the example here I had only one CD cycle and the component with OnPush strategy did not get checked: