I am not able to show the performance difference using default and onPush change detection method. Is there is way to prove this concept? I tried searching online and YouTube however I am not able to show it. Could you please help me achieve this that how can I show the difference in performance using the onpush change detection method.
I tried creating the counter in a nested commponents and used the Angular dev tools to see the change however I am not getting the output and if check using the performance in the dev tool there is no difference in the loading of the application. I also tried loading a child component thousands of times. however I am still not able to see the difference.
Angular's ChangeDetection is about runtime performance rather than loading. I won't explain all the details of CD as there are lots of articles about it. In short: Default strategy causes the component to update each time the CD is triggered and this may happen quite often (hundreds and thousands of times per second) in some cases. This is handy if the component renders values from global variables or depends on other component's dimensions, but there should be nearly 0 real cases for that for 99% of real-world applications.
OnPush strategy does not cause the component update unless its input changed, or event that caused the CD happened "inside" this component. It is a way to eliminate updates on irrelevant changes.
Here is a playground where you can see the difference: playgroud
There are 2 identical components, one uses default strategy, and another one - onPush, both do some heavy stuff to emulate a real rendering load that may happen. When you click "Test" CD is triggered in the parent component and when component one is shown you feel a delay in the counter update, but if you click switch - a second component (onPush) is shown, and clicking "Test" has much better response time.