Angular 2 OnPush detection strategy

Question

I have a problem with understanding Angular OnPush detection strategy. When I do some async actions (like open overlay from TS, so that should not cause detect changes on a component with a OnPush strategy), and after that i click anywhere, or call other detect events (not at my component), it changes (overlay opens). Why does it happen? I have too much such components on a page (perfomance gets really bad when i have 15-20 units), so i need to disable detecting, how can i do that? I tried to use detach() method, but i stil need changes after simple events on my components.

Welcome to Stack Overflow! Please read How to ask a good question and add some code of your efforts to your question. Thanks! — David

mchl18 mchl18 · Accepted Answer · 2018-09-09T11:14:51

This explains onPush comprehensively: https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

It does fire when an @Input is changed or an event is fired.

ChangeDetectorRef knows some methods which could be interesting

Sounds like you want to detach and reattach manually:

constructor(private cd: ChangeDetectorRef){}

public ngOnInit() {
  this.cd.detach();

  // do stuff

  this.cd.reattach();
}

If you detach and never reattach, yes, no changes will reflect in the UI. If you need to do heavy tasks and need change detection to stop, you will also have to re-enable it with reattach()

Although it also sounds like you want to rethink your component structure, since you wanna mess with change detection as little as possible to avoid UI bugs.

Angular 2 OnPush detection strategy

1 Answers