Angular Typescript $event.target.value

Question

I'm trying to go through the Adam Freeman angular book, but many of the example don't work, I imagine due to new changes since it was written.

The issue I have is the following template doesn't work due to typescript not liking the event.target

<input type="text" class="form-control" (input)="selectedProduct=$event.target.value">

The selectedProduct is declared in the template component as show below (

export class ProductComponent {
    selectedProduct: string = "";
}

I then tried this by casting it as a HTMLTextAreaElement but then it says possibly undefined

I also tried with the !

If anyone could explain how I get this to work that would be great as it seems like pulling teeth, cheers.

Chellappan வ · Accepted Answer · 2021-07-07 16:24:06Z

3

Use $any() type cast function.

Try this:

  <input type="text"  class="form-control" (input)="selectedProduct=$any($event).target.value">

answered Jul 7, 2021 at 16:24

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

Thank you this at least worked, much appreciated, the next part of the book goes into using [(ngModel)] which then means I dont have to do this, but useful to get it working, cheers.

Alireza Ahmadi · Accepted Answer · 2021-07-07 16:34:33Z

2

This issues is not about angular and it's about typescript. This feature is called strict null checks and you can turn it off by strictNullChecks to false in tsconfig file.

But better way is to use Optional chaining (see this) that is a means to access properties on possibly null or undefined reference.

Note that you need typescript version be 3.7 or later for Optional chaining:

<input type="text" class="form-control" (input)="selectedProduct=$event?.target?.value">

edited Jul 7, 2021 at 16:34

answered Jul 7, 2021 at 16:29

Alireza Ahmadi

10.2k8 gold badges28 silver badges65 bronze badges

1 Comment

Andrew Over a year ago

Thanks I believe I am using this 3.7 as that is what is installed in this path C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.7 but the ? still cause the issue "Property 'value' does not exist on type 'EventTarget'."

Brandon Ryan · Accepted Answer · 2024-05-27 15:41:37Z

0

Late response but this is the simplest solution in my opinion:

<input type="text"  class="form-control" (input)="selectedProduct=selection.value" #selection>

answered May 27, 2024 at 15:41

Brandon Ryan

364 bronze badges

Collectives™ on Stack Overflow

Angular Typescript $event.target.value

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related