How to check if Change Detection was triggered on a component

Question

In my app I want to set manual change detection. For this I set the ChangeDetectionStrategry to OnPush and whenever a change occurs in a component I manually run change detection using detectChanges.

If I set ChangeDetectionStrategy to OnPush on a parent component, as per my understanding it will run change detection only once on the parent component and only once on the child component, even if I don't set ChangeDetectionStrategy to OnPush on child. If there is any change in the parent component, I run detectChanges() in parent component. And if there is any change in the child component, I run detectChanges() in child component.

Please suggest is it the correct way? or is there any better way?

Secondly, is there any way to check if its working as expect and no change detection is performed on a particular component.

Louralourdes

Answer 1

With ChangeDetectionStrategy.OnPush, change detection is run in the child component when an @Input()s value of the child component was updated, an event the child component was listening to was received (someEvent)="..." or @HostListener(...) or an observable bound to using the | async pipe emitted an event.

To run code when @Input() was changed you can make the input a setter or implement OnChanges for code to be executed on updates.

For events, just call your code in the event handler.

For observables you can apply an operator like .map(...) for your code to be executed when values are emitted.

Gustafsson

Thank you Günter for the information, can you please also comment on my first question which is about 2nd para in my question, is it the rite way? – Louralourdes

Actually I think I answered it, at least implicitly. Change detection in the child is invoked when an @Input() is changed. Therefore if the parent changes a property that is bound to an input of the child, change detection of the child is invoked. – Adrianople

If the change occurs in a parent but that doesn't modify a child's inputs Angular will not run change detection for that component, correct? (I am using ChangeDetectionStrategy.OnPush on child). – Louralourdes

Answer 2

If you want "manual" change detection, use ChangeDetectorRef.detach() rather than OnPush. You might want to do this if you have a component with (a lot of) data that is changing very frequently, hence you want/need to control how often change detection runs (i.e., when the view is updated) so that the user interface remains responsive (i.e., the browser doesn't get bogged down with too much change detection).

The above use case is rare, and you probably want to use OnPush to limit how often change detection runs on your component, rather than go all the way to fully manual change detection. @Günter already covered OnPush in his answer.

is there any way to check if its working as expect and no change detection is performed on a particular component

Yes, implement ngDoCheck() and put a console.log() inside it. This method is called whenever change detection runs on your component/directive.

Primo

Great! I forgot ngDoCheck() somehow :p – Rosemarierosemary