Angular: click event for video

I am trying to bind click event on video but it is not working. I need to fire event whenever user click on anywhere on the video or controls of video element. I have tried following:

component.html

<video
[src]="url"
(loadeddata)="onVideoLoaded($event)"
(click)="doSomething($event)"
>
</video>


component.ts

onVideoLoaded(event) {
const videoEl = event.target as HTMLVideoElement;
videoEl.onclick = (event) => this.doSomething(event)
videoEl.addEventListener('mousedown', this.doSomething);
}

doSomething(event){
console.log(event)
}


None of the above approach to bind video click event is working. How can I do it?

Continue reading...