'How to check which changedetectionStrategy is used in component

Is there a way to find out which changedetectionStrategy is actually used by components. I have a very large angular application which uses onPush on the outer component, so everything should use onPush.

But when applying onPush additionally on some of the child components, performance improves somehow.

That screenshot shows changeCycles when mouse moves in almost exact same time and distance.

left: no additional cd; right: additional cd.onPush



Solution 1:[1]

The performance gain as you describe it makes sense: The outer components have ChangeDetectionStrategy.OnPush, so in a CD cycle they will only be checked in certain circumstances. But IF they are checked, CD is also performed on all children of such an OnPush component. If the children all have ChangeDetectionStrategy.Default, all of them (and their children, grandchildren, ...) will be checked for changes. If you mark some of the children as OnPush, they and and their children might be skipped during a CD cycle.

You can visualize this process in the AngularDevTools by choosing the flame graph and selecting to only show the components that have been checked during a cycle:

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slim