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. |
|||
Parameters
Returns |
Methods
emit() |
---|
Emits an event containing a given value. |
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>