CODEWITHSUNDEEP
javascriptangular
himanshu
himanshu

Reputation: 125

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

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.

Upvotes: 6

Views: 6618

Answers (1)

Gobika
Gobika

Reputation: 324

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

Upvotes: 19

Related Questions