3

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!

SebastianG
  • 8,563
  • 8
  • 47
  • 111
  • 2
    I guess you meant to do `this.changes += 1` – vighnesh153 Jun 07 '20 at 01:10
  • 2
    Actually `this.changes++` or `++this.changes` or `this.changes += 1` should do, pic your poison :) – Bargros Jun 07 '20 at 01:22
  • aaah @VighneshRaut you're right, idk why I overlooked that typo, it's so stupidly obvious, was 100% sure I wrote += 1, I just changed it to ++. Any ideas on how to shut up the 'Expression changed after it has been checked" for this particular case? I know the error is correct and it makes perfect sense to warn me about that -- but for this particular case only. Hmm – SebastianG Jun 07 '20 at 12:44
  • also @VighneshRaut if you post that as the answer I'll be happy to mark it as the answer. – SebastianG Jun 07 '20 at 13:24
  • Just thinking on how can one turn the error off. – vighnesh153 Jun 07 '20 at 13:36

1 Answers1

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: enter image description here

slim
  • 414
  • 1
  • 7