Cannot remove Event Listeners from object on Angular

Question

I have an image with mouseenter and mouseleave attributes. When the cursor first hovers this image, it calls startCalc(id) method and in this I am calculating some stats with addEventListener. When the cursor leaves this image I call stopCalc() and in this method I save my calculations, then remove event listeners. But event listeners are not removing.

Here is my code:

    <img id="img-1" class="img" (mouseenter)="startCalc('img-1')" (mouseleave)="stopCalc()" src="{{url}}" />

Backend side:

    startCalc(imgID: string) {
        var img = document.getElementById(imgID);
        img.addEventListener("mousemove", calc);
        
        function calc(e) { 
            // doing some calculations
        }
    }
    
    stopCalc() {
        // saving those calculations

        var elements = document.getElementsByClassName("img");
    
        for (let i = 0; i < elements.length; i++) {
            elements[i].addEventListener("mousemove", null);
        }
    }

What am I missing here?