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.
API
interface EventEmitter<T> extends Subject<T>, OutputRef<T> { emit(value?: T | undefined): void; subscribe(next?: ((value: T) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription; subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription;} emit
voidEmits an event containing a given value.
T | undefinedThe value to emit.
voidsubscribe
SubscriptionRegisters handlers for events emitted by this instance.
((value: T) => void) | undefinedWhen supplied, a custom handler for emitted events.
((error: any) => void) | undefinedWhen supplied, a custom handler for an error notification from this emitter.
(() => void) | undefinedWhen supplied, a custom handler for a completion notification from this emitter.
Subscriptionsubscribe
SubscriptionRegisters handlers for events emitted by this instance.
anyWhen supplied, a custom handler for emitted events, or an observer object.
anyWhen supplied, a custom handler for an error notification from this emitter.
anyWhen supplied, a custom handler for a completion notification from this emitter.
SubscriptionUsage 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>