My current component setup looks like this:
@Component({
template: `
...
<child-component (childEvent)="onChildEvent()"></child-component>
`
})
export class ParentComponent {
onChildEvent() {
...
}
}
I am aiming to transform the calls to the onChildFinished method into an observable sequence.
If the method in question was related to a typical DOM event like click or blur, I could have used Observable.fromEvent. However, since there is no native event involved in this case, that approach isn't applicable.
The only solution that comes to mind involves the following implementation:
@Component({
template: `
...
<child-component (childEvent)="onChildEvent()"></child-component>
`
})
export class ParentComponent implements OnInit, OnDestroy {
private childEventStream: Observable<void>;
// The type of this
// appears to be an internal RxJS object
private observer: any;
onChildEvent() {
this.observer.next();
}
ngOnInit() {
this.childFinishedStream = Observable.create(
observer => this.observer = observer;
);
}
ngOnDestroy() {
this.observer.completed();
}
}
This process seems inefficient and complex, especially when dealing with multiple handlers. There must be a more streamlined approach available.