Property 'value' does not exist on type 'EventTarget'

[sysmat]

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?

[alxhub]

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)">

2. Globally tell Angular not to check the type of DOM event bindings by disabling strictDomEventTypes:

{
  "angularCompilerOptions": {
    "strictTemplates": true
    "strictDomEventTypes": false,
  }
}

3. 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;
  }
}

[topce]

Hi @sysmat @pkozlowski-opensource and @alxhub

According Angular documentation passing event is a dubious practice:
passing event is a dubious practice.
There they advise to use template ref

Is it documentation still relevant !?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}