14

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.

Improve this question

2 Answers 2

Reset to default
16

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great! I forgot ngDoCheck() somehow :p
10

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.

Improve this answer

3 Comments

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?
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.
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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.