Property ‘value’ does not exist on type ‘EventTarget’ Error in Angular

Property ‘value’ does not exist on type ‘EventTarget’ Error is a common error in Angular. It shows up when you try to access the value property of an HTML element during event binding.

Property value does not exist on type EventTarget Example

The following are the examples, where you will see the above error

Example 1

app.component.html

<input type="text" (input)="handleInput($event)" />
<p>You entered {{value1}}</p>

Source Code

app.component.ts

value1 = "";
value2 = "";  

handleInput(event: Event) {
   this.value1 = event.target.value;
}

Source Code

Example 2

app.component.html

<input (keyup)="value2=$event.target.value)" />
<p>You entered {{value2}}</p>

Source Code

Reason for Error

This error is flagged by the TypeScript compiler.

The $event in both examples are of type HTMLElement. It can represent any HTML Element. Hence the value property is not guaranteed to exist in the $event.target.

Hence the TypeScript compiler throws an error.

The Error is also thrown in the component Template. This is because of the new angular projects sets the fullTemplateTypeCheck to true in tsconfig.json.

Solution to the Problem

Component Class

The solution is to cast the event.target to appropriate HTML element as shown below

handleInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Component Template

To solve this problem, use the $any typecast function ($any($event.target).value) to stop the type checking in the template

<input (keyup)="value2=$any($event.target).value" />
<p>You entered {{value2}}</p>

Compiler Option

You can also set fullTemplateTypeCheck to false in tsconfig.json. This will stop the Typescript compiler from running type check in Template.

You will find the fullTemplateTypeCheck under the angularCompilerOptions in the tsconfig.json.