Flicker problem when hovering over text

[BahaaKab]

Flicker problem when hovering over text

[Laurens-makel]

The probem you've experienced here is related to the way Angular & Zonejs work together.

Angular needs to know when the view needs to be re-evaluated, it does that by the help of Zonejs. This library will 'patch' all native browser events with a custom event listener, this event listener is used as a hook to let Angular know that a certain event occurred and change detection should be triggered.

Every single pixel you drag over will trigger such event, triggering ZoneJS, which triggers Angular's change detection. If you have many variables bound in your template, these are re-evaluated every change detection cycle. If you reference functions in your template, each function is called every change detection.

This leads to a bunch of useless usage of computation resources.

I'd recommend to check out the RxAngular Unpatch directive. This directive has been designed to 'unpatch' the ZoneJS patched events and prevents useless change detection cycles.

[BahaaKab]

@Laurens-makel I tried it on a small project but same components, the unpatch with the 'dragover' or 'dragleave' didn't work and the flickering didn't change. Is there perhaps something specific you can help me with?