Adding mouseover ad mouseleave Event Listener to element in Angular

Question

I am trying to add a hover-over zoom functionality to my images. I created a function as per below and tried to add it to ngOnInit() {} but the functionality isn't working.

@Component({
    selector: 'app-image',
    templateUrl: './image.component.html',
    styleUrls: ['./image.component.scss']
})
export class ImageComponent extends BaseComponent implements OnInit, OnDestroy {
    constructor() { }
    super();
    this.toggleImageZoom();
}

    toggleImageZoom() {
        Array.prototype.slice.call(document.getElementsByClassName('center')).forEach(element => {
            element.addEventListener('mouseenter', function(e) {
                this.classList.add('sample-image-large');
            });
            element.addEventListener('mouseleave', function(e) {
                this.classList.remove('sample-image-large');
            });
        });
    }

    ngOnInit() {
        this.init();
        this.toggleImageZoom();
    }

How do I ensure that the hover-over functionality is implemented ?

Answer 1

Kindly refer to my stackbliz example, you can apply your zoom in/out logic inside

methods called by mouseover/mouseout events

https://stackblitz.com/edit/angular-xenpxt