feat(core): narrower event binding types

[LayZeeDK]

🚀 feature request

Relevant Package

This feature request is for @angular/core.

Description

With the strictTemplates: true Angular compiler setting, it can be tough to deal with native $event in event bindings.

Describe the solution you'd like

I would like to be able to do

• <input (input)="onInput($event.target.value)"> where $event is InputEvent or $event.target/$event.currentTarget is HTMLInputElement
• <button (click)="onClick($event.target.textContent)>Hello <span>World</span></button> where $event is MouseEvent and $event.target/$event.currentTarget is HTMLButtonElement

Describe alternatives you've considered

We can use $any() casting, but that is counterintuitive when having strictTemplates compilation enabled.

Maybe $event.currentTarget is easier to work with than $event.target for this feature.

[petebacondarwin]

This is basically a duplicate of #35958

[LayZeeDK]

I had a discussion with @alxhub about this yesterday and he thought that there is a way this could be improved.

Yeah, we might be able to do something there.
Like, this could infer HTMLButtonElement for $event.target:
<button (click)="onClick($event.target)">Test</button>

but in this case we could recognize the potential for bubbling:
<button (click)="onClick($event.target)">Test <span>button</span></button>

and leave it as EventTarget.
--@alxhub

Exactly what I had in mind.
I mean <input (input)="onInput($event.target.value)">, not much bubbling going on here 🙂
--@LayZeeDK

@LayZeeDK exactly, that's one of those cases I think would be relatively easy to narrow better.
We could also always narrow currentTarget potentially.
--@alxhub

[jelbourn]

@crisbeto did you mention you were looking into something related to this?

[crisbeto]

I fixed something around $event, but it's unrelated to this issue. #39323