Output

Declares an event-bound output property.

When an output property emits an event, an event handler attached to that event the template is invoked.

The Output annotation takes an optional parameter that specifies the name used when instantiating a component in the template. When not provided, the name of the decorated property is used.

Example

@Directive(selector: 'interval-dir')
class IntervalDir {
  @Output()
  final everySecond = new EventEmitter<String>();
 
  @Output('everyFiveSeconds')
  final every5Secs = new EventEmitter<String>();
 
  IntervalDir() {
    setInterval(() => everySecond.emit("event"), 1000);
    setInterval(() => every5Secs.emit("event"), 5000);
  }
}
 
@Component(
  selector: 'app',
  template: '''
    <interval-dir
        (everySecond)="everySecond()"
        (everyFiveSeconds)="everyFiveSeconds()">
    </interval-dir>
  ''',
  directives: const [IntervalDir])
class App {
  void everySecond() {
    print('second');
  }
 
  everyFiveSeconds() {
    print('five seconds');
  }
}