This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

EventEmitter

npm Package @angular/core
Module import { EventEmitter } from '@angular/core';
Source core/src/event_emitter.ts

Overview

      
      class EventEmitter<T> extends Subject {
  constructor(isAsync: boolean = false)
  ___isAsync: boolean
  emit(value?: T)
  subscribe(generatorOrNext?: any, error?: any, complete?: any): any
}

Description

Use by directives and components to emit custom Events.

Examples

In the following example, Zippy alternatively emits open and close events when its title gets clicked:

      
      @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);
    }
  }
}

The events payload can be accessed by the parameter $event on the components output event handler:

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

Uses Rx.Observable but provides an adapter to make it work as specified here: https://github.com/jhusain/observable-spec

Once a reference implementation of the spec is available, switch to it.

Constructor

      
      constructor(isAsync: boolean = false)

Creates an instance of EventEmitter, which depending on isAsync, delivers events synchronously or asynchronously.

Members

      
      ___isAsync: boolean
    
      
      emit(value?: T)
    
      
      subscribe(generatorOrNext?: any, error?: any, complete?: any): any