On this page
EventEmitter
class
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.  | 
      |||
        
          | 
      
isAsync | 
            boolean | 
            When true, deliver events asynchronously. Optional. Default is   | 
           
Properties
| Property | Description | 
|---|---|
__isAsync: boolean | 
       Internal  | 
      
Methods
| 
         
          emit() 
          | 
      |||
|---|---|---|---|
Emits an event containing a given value.  | 
      |||
        
          | 
      
value | 
            T | 
            The value to emit. Optional. Default is   | 
           
| 
         
          subscribe() 
          | 
      |||||||||
|---|---|---|---|---|---|---|---|---|---|
Registers handlers for events emitted by this instance.  | 
      |||||||||
        
          | 
      
generatorOrNext | 
            any | 
            When supplied, a custom handler for emitted events. Optional. Default is   | 
           
error | 
            any | 
            When supplied, a custom handler for an error notification from this emitter. Optional. Default is   | 
           
complete | 
            any | 
            When supplied, a custom handler for a completion notification from this emitter. Optional. Default is   | 
           
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);
    }
  }
}
   Access the event object with the $event argument passed to the output event handler:
<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.
© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
 https://v7.angular.io/api/core/EventEmitter