Flicker problem when hovering over text

[BahaaKab]

I have this problem, where when I hover over the drop zone, it flickers between the design when the mouse is in and the design when the mouse is out even though the mouse is hovering inside the drop zone. I have a boolean called "dragged" that I included in fileOver to be true and in fileLeave to be false.
In the html I used ngIF: "!dragged" to make a design and ngIF: "dragged" to do another design when the mouse is on the drop zone with a file on hand. From what I observed, the fileLeave and fileOver fire multiple times when the mouse is hovering around the zone drop. Is there any solution for it?

[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?