How to apply onPush change detection in angular just for a particular event

Question

I was working on an application that is already developed by using default change detection of angular and we are facing slowness issue. I tried to use onPush change detection which brings a lot of boot in performance but it requires a lot of change.

So, I tried to use detach() of ChangeDetectorRef to detach my component from the change detection on a click of a button and when the processing is done then reattach it, so that angular change detection could be performed. But, it didn't give any performance improvement.

Is there any other way by which we would replicate what happens in onPush change detection on a click of button and when the event handler finishes execution, then we change the change detection strategy back to default?

Thanks in advance.

Loy Loy · Accepted Answer · 2019-10-09T18:36:19

Not sure but it might be worth looking towards ngZone.runOutsideAngular (). It is a way to escape Angular’s change detection, without detaching change detectors. For example:

 constructor(private zone: NgZone) {}

    this.zone.runOutsideAngular(() => {
        this.document.addEventListener(
            'click',
            this.onDocumentClick.bind(this)
        );
    });

Hope it helps you!

How to apply onPush change detection in angular just for a particular event

1 Answers