Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

EventEmitter

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.

      
      class EventEmitter<T> extends Subject<T>, OutputRef<T> {
  constructor(isAsync?: boolean): EventEmitter<T>
emit(value?: T): void
subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription
subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription // inherited from core/OutputRef
subscribe(callback: (value: T) => void): OutputRefSubscription }

See also

Constructor

Creates an instance of this class that can deliver events synchronously or asynchronously.

This class is "final" and should not be extended. See the public API notes.

      
      constructor(isAsync?: boolean): EventEmitter<T>
    
Parameters
isAsync boolean

When true, deliver events asynchronously.

Optional. Default is false.

Returns

EventEmitter<T>

Methods

Emits an event containing a given value.

      
      emit(value?: T): void
    
Parameters
value T

The value to emit.

Optional. Default is undefined.

Returns

void

Registers handlers for events emitted by this instance.

      
      subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription
    
Parameters
next (value: T) => void

When supplied, a custom handler for emitted events.

Optional. Default is undefined.

error (error: any) => void

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

Optional. Default is undefined.

complete () => void

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

Optional. Default is undefined.

Returns

Subscription

      
      subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription
    
Parameters
observerOrNext any

When supplied, a custom handler for emitted events, or an observer object.

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

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>