Useful or not, from you.
angular Property 'value' does not exist on type 'EventTarget'

tsconfig.json: "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictTemplates": true }

🚀 feature request

Relevant Package

angular 9

Description

Casting in html template

(keyup)="filter($event.target.value)"

Describe the solution you'd like

(keyup)="filter(($event.target as HTMLInputElement).value)"

Describe alternatives you've considered

<!-- ✍️--> Have you considered any alternative solutions or workarounds?

That's a useful answer
Without any help

Hello @sysmat,

Unfortunately casting in templates isn't really possible at this point. There is no way to import types within a template and it's not likely that Angular will gain that ability in the near future.

There are three potential approaches here:

  1. use an explicit cast to any:
<input (keyup)="filter($any($event.target).value)">
  1. Globally tell Angular not to check the type of DOM event bindings by disabling strictDomEventTypes:
{
  "angularCompilerOptions": {
    "strictTemplates": true
    "strictDomEventTypes": false,
  }
}
  1. Use a component method to implement the cast:
@Component({
  selector: '...',
  template: '<input (keyup)="filter(target($event).value)">',
})
export class SomeCmp {
  target(event: KeyboardEvent): HTMLInputElement {
    if (!(event.target instanceof HTMLInputElement)) {
      throw new Error("wrong target");
    }
    return event.target;
  }
}