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 ?

NgAfterViewInit :- Respond after Angular initializes the component's views and child views / the view that a directive is in. That being said, it will be better to create a component for just the image zoom. — sabithpocker
– sabithpocker, Commented Jan 13, 2020 at 8:40
Adding event listeners this way is also not a good practice, instead use HostListeners or simply (mouseover) in the template. — sabithpocker
– sabithpocker, Commented Jan 13, 2020 at 8:45

varundhariyal · Accepted Answer · 2020-01-13 08:48:52Z

3

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

answered Jan 13, 2020 at 8:48

varundhariyal

1,9651 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding mouseover ad mouseleave Event Listener to element in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related