angular
angular copied to clipboard
Outputs may unexpectedly collide with a native event
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
Oh no...
https://github.com/dart-lang/angular/blob/cb2acfc224c579b82aa71dfe18337870dc89ba72/angular/lib/src/compiler/html_events.dart#L5-L83
We could also require labeling native events.