Cast $event.target to HTMLInputElement within Angular's HTML template

Question

From within a template's input element, I wish to pass $event.target's value to an onChange() function.

<input (input)="onChange($event.target?.value)">

This leads to an error: Property 'value' does not exist on type 'EventTarget'.ngtsc(2339). My thoughts are that $event.target by default has an EventTarget type and should be somehow cast to HTMLInputElement type, but I can't find a way to achieve this. All examples I've found suggest to pass $event itself and make a cast within a component's code. Disabling or lowering strictness is also not an option for me. Is there a way to set type directly within a template?

Thanks in advance.

Why would you try to cast from the template when its perfectly fine to do it from your ts file? — ukn
– ukn, Commented Feb 10, 2022 at 23:23
Well, to be honest, I don't have a strong reason, except from it's done that way in a course I'm using to learn Angular, but they don't use strict mode and I do. — Igor Nikiforov
– Igor Nikiforov, Commented Feb 10, 2022 at 23:28

Mohi · Accepted Answer · 2022-02-10 23:26:22Z

2

Passing $event is a dubious practice!

use a template reference variable to get the user's input. It's easier to get to the input data with the template reference variable than to go through the $event object.

@Component({
  selector: 'app-component',
  template: `
    <input #myInput (input)="onChange(myInput.value)">
  `
})
export class AppComponent {
   values = '';
   onChange(value: string) {
      this.values += value;
   }
}

answered Feb 10, 2022 at 23:26

Mohi

3154 silver badges14 bronze badges

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

4 Comments

paddotk Over a year ago

This answer is wrong for multiple reasons. First, the input event itself passes $event, you can just choose to pass it completely or extract just the value from it. There is no reason to consider this wrong or dubious (in fact, in many cases you might want to have the complete event object available rather than just the value). Secondly, in an event callback you should use the value of the passed event object (event.target.value), NOT the value from the input directly (myInput.value).

Mohi Over a year ago

@paddotk the answer is completely correct. If you don't familiar with Angular framework then I highly recommend to read the following documentation: angular.io/guide/user-input#passing-event-is-a-dubious-practice

paddotk Over a year ago

What I think is meant by that section is an explanation for their choice of implementation; i.e. that event.target is not recognized as an HTMLInputElement, hence the required cast to this type.

Mohi Over a year ago

@paddotk ofc it's their choice of implementation. His question is related to Angular framework not pure JS or other frameworks. So, My answer leads him to use template reference variable. anyway, I think you should upvote to my answer :)

Collectives™ on Stack Overflow

Cast $event.target to HTMLInputElement within Angular's HTML template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related