@angular/core

EventEmitter

interface

stable

Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.

API

    
      interface EventEmitter<T> extends Subject<T>, OutputRef<T> {
}

emit

void

Emits an event containing a given value.

@paramvalueT | undefined

The value to emit.

@returnsvoid

Usage Notes

Extends RxJS Subject for Angular by adding the emit() method.

In the following example, a component defines two output properties that create event emitters. When the title is clicked, the emitter emits an open or close event to toggle the current visibility state.

@Component({  selector: 'zippy',  template: `  <div class="zippy">    <div (click)="toggle()">Toggle</div>    <div [hidden]="!visible">      <ng-content></ng-content>    </div> </div>`})export class Zippy {  visible: boolean = true;  @Output() open: EventEmitter<any> = new EventEmitter();  @Output() close: EventEmitter<any> = new EventEmitter();  toggle() {    this.visible = !this.visible;    if (this.visible) {      this.open.emit(null);    } else {      this.close.emit(null);    }  }}

Access the event object with the $event argument passed to the output event handler:

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>