Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(core): narrower event binding types #39120

Open
LayZeeDK opened this issue Oct 5, 2020 · 4 comments
Open

feat(core): narrower event binding types #39120

LayZeeDK opened this issue Oct 5, 2020 · 4 comments
Labels
comp: core cross-cutting: types P3
Milestone
Backlog

Comments

@LayZeeDK
Copy link
Contributor

@LayZeeDK LayZeeDK commented Oct 5, 2020 •
edited

🚀 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.
@josephperrott josephperrott added the comp: core label Oct 5, 2020
@ngbot ngbot bot added this to the needsTriage milestone Oct 5, 2020
@petebacondarwin
Copy link
Member

@petebacondarwin petebacondarwin commented Oct 5, 2020

This is basically a duplicate of #35958

@LayZeeDK
Copy link
Contributor Author

@LayZeeDK LayZeeDK commented Oct 6, 2020 •
edited

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
Copy link
Member

@jelbourn jelbourn commented Oct 19, 2020

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

@crisbeto
Copy link
Member

@crisbeto crisbeto commented Oct 20, 2020

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

@jelbourn jelbourn added cross-cutting: types P3 labels Oct 28, 2020
@ngbot ngbot bot removed this from the needsTriage milestone Oct 28, 2020
@ngbot ngbot bot added this to the Backlog milestone Oct 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
comp: core cross-cutting: types P3
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
5 participants
@petebacondarwin @jelbourn @crisbeto @LayZeeDK @josephperrott