"$event.target.value" throws error in app.component.html file. in Angular

Question

I just encountered with an error in my Angular app. So here it goes.

In my "app.component.html" file, I have following code.

<input (keyup)="handleEvent($event.target.value)" />

And In my "app.component.ts", I have following code.

export class AppComponent {
  title = 'blog';
  handleEvent(event: any) { // without type info
  console.log(event);
  console.log(event.target.value);
}

My problem is that, when I try to access the input value in "app.component.html" with "$event.target.value", I get the following error.

**[0mProperty 'value' does not exist on type 'EventTarget'.**

On the other hand, when I only pass "$event" as parameter to my "handleEvent" function, then I can successfully access my input value. You can see my "app.component.ts" file.

Why it is happening? Is there any blocks that we cannot access "event" properties in "app.component.html"?

Kindly ignore any immature mistake. Thanks in advance.

Answer 1

Use the $any() type-cast function in certain contexts to opt out of type-checking for a part of the expression

<input (keyup)="handleEvent($any($event).target.value)" />

Reference