Type of `$event.target` should match event binding host

[chalin]

Consider

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >
                                               ^

This results in

warning: The getter 'value' isn't defined for the class 'EventTarget'. (undefined_getter at [template_syntax] lib/app_component.html:441)

IMHO, the type of $event.taget should be taken as the type of the host element (InputElement in this case).

[MichaelRFairhurst]

Ah interesting. This would be tough for us to do. It's the equivalent of doing

InputElement i = document.getElementById(...);
i.onClick((e) => use(e.target.value)); // wouldn't work!

We rely on dart tooling enough that this would be hard for us to handle since it isn't generalizable within dart itself.

However, the equivalent workaround:

i.onClick((e) => use(i.value));

is possible within angular as well

<input #i (input)="currentHero.name = i.value" />

[MichaelRFairhurst]

@kwalrath can you check if we are suggesting the "$event.target.value" approach anywhere in for instance the tour of heroes? I don't have the sources anywhere I can easily search, but it won't work for users of the plugin well.

I did find this: https://webdev.dartlang.org/angular/tutorial/toh-pt6#herosearchcomponent which makes me think we may not be recommending "$event.target" at all which I think is ideal

[chalin]

The example I quoted is from this section of the docs: https://webdev-dartlang-org-dev.firebaseapp.com/angular/guide/template-syntax#event-and-event-handling-statements

[chalin]

Btw, https://webdev.dartlang.org hosts the Angular 4 docs. Select the AngularDart dropdown in the main menu to switch to the Angular 5-dev version of the site.

[chalin]

If $event were a generic type, Event<TargetType>, then it might be possible :), but I understand that it is beyond the scope of this issue. Thanks for the discussion. Closing.