'play' does not exist on type 'HTMLElement' and Property 'value' does not exist on type 'EventTarget'

In Angular 5 you need to cast it as follows:

let audioPlayer = <HTMLVideoElement> document.getElementById(audioId);

audioPlayer.play();  

The first warning means that there is no play() method on an HTMLElement instance. This makes sense since play() is presumably a method that you have defined on your own component.

The second warning means that there is no value property in the EventTarget instance. For more information about EventTargets, see MDN.

I am not sure how to solve the first problem since you need to grab access to an instance that you have created. But for the second one, you most likely just need to cast the return value. So, you should do something like this:

{e => this.toogleDisplaymode((e.target as HTMLInputElement).value)}

---

EDIT: This might solve your first problem.

I am not sure, but it might be that you are trying to play a media element and if that's the case, you need to cast the audioPlayer to the right type:

let audioPlayer: HTMLMediaElement = document.getElementById(audioId)

See MDN, again, for more information.

A late post but it will help other users, To solve the first problem you can change type of audioPlayer variable to HtmlVideoElement as below

let audioPlayer: HTMLVideoElement = document.getElementById(audioId);  
audioPlayer.play();  

This will definately resolve the problem