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): any
}
Constructor
Properties
Property | Description |
---|---|
__isAsync: boolean
|
Internal |
Methods
Emits an event containing a given value. |
||
Parameters
|
Registers handlers for events emitted by this instance. |
||||||
Parameters
Returns
|
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.