Outputs may unexpectedly collide with a native event

[matanlurey]

During our internal code-lab, a new user hit the following issue:

// thumbs.dart
import 'dart:async';

import 'package:angular/angular.dart';

@Component(
  selector: 'thumbs-change',
  template: r'''
    <button (click)="onClick">Click</button>
  ''',
)
class ThumbsComponent {
  final _onChange = new StreamController<ThumbsChangeEvent>();

  @Output()
  Stream<ThumbsChangeEvent> get change => _onChange.stream;

  void onClick() {
    _onChange.add(new ThumbsChangeEvent());
  }
}

class ThumbsChangeEvent {}

// results.dart
import 'package:angular/angular.dart';

import 'thumbs.dart';

@Component(
  selector: 'search-results',
  template: r'''
    <thumbs-change (change)="onChange"></thumbs-change>
  ''',
  directives: [ThumbsComponent],
)
class SearchResultsComponent {
  void onChange(ThumbsChangeEvent e) {

  }
}

... for whatever reason, (change) binds to a native event listener, resulting in:

Assertion Error: (ThumbsChangeEvent) => void is not an (Event) => void

---

We might consider:

• [ ] Documenting that certain event names are reserved or at least, not preferred
• [ ] Making it a warning (and eventually error) to override a native event name
• [ ] Fixing this case to correctly bind to the @Output() change event, not native event

[matanlurey]

Oh no...

https://github.com/dart-lang/angular/blob/cb2acfc224c579b82aa71dfe18337870dc89ba72/angular/lib/src/compiler/html_events.dart#L5-L83

[matanlurey]

We could also require labeling native events.