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

Source Code

app.component.ts

Source Code

Example 2

app.component.html

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

Component Template

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

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.

2 thoughts on “Property ‘value’ does not exist on type ‘EventTarget’ Error in Angular”

  1. Thanks for this solution “$any($event.target).value”! All the answers on Stackoverflow were about a problem in the Class component not in the template.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top