Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/core

EventEmitter

Use in directives and components to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.

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

Constructor

Creates an instance of this class that can deliver events synchronously or asynchronously.
constructor(isAsync: boolean = false)
      
      constructor(isAsync: boolean = false)
Parameters
isAsync boolean

When true, deliver events asynchronously.

Optional. Default is false.

Properties

Property Description
__isAsync: boolean

Internal

Methods

emit()

Emits an event containing a given value.
emit(value?: T)
      
      emit(value?: T)
Parameters
value T

The value to emit.

Optional. Default is undefined.

subscribe()

Registers handlers for events emitted by this instance.
subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
      
      subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
Parameters
generatorOrNext any

When supplied, a custom handler for emitted events.

Optional. Default is undefined.
error any

When supplied, a custom handler for an error notification from this emitter.

Optional. Default is undefined.
complete any

When supplied, a custom handler for a completion notification from this emitter.

Optional. Default is undefined.
Returns

Subscription

Usage notes

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); } } } 
      
      
  1. @Component({
  2.   selector: 'zippy',
  3.   template: `
  4.   <div class="zippy">
  5.     <div (click)="toggle()">Toggle</div>
  6.     <div [hidden]="!visible">
  7.       <ng-content></ng-content>
  8.     </div>
  9.  </div>`})
  10. export class Zippy {
  11.   visible: boolean = true;
  12.   @Output() open: EventEmitter<any> = new EventEmitter();
  13.   @Output() close: EventEmitter<any> = new EventEmitter();
  14.  
  15.   toggle() {
  16.     this.visible = !this.visible;
  17.     if (this.visible) {
  18.       this.open.emit(null);
  19.     } else {
  20.       this.close.emit(null);
  21.     }
  22.   }
  23. }

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

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

Notes

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.