How can I complete Observable in RxJS

Question

Let's say we have an Observable:

var observable = Rx.Observable     .fromEvent(document.getElementById('emitter'), 'click'); 

How can I make it Complete (what will trigger onComplete event for all subscribed Observers) ?

Answer 1

In this present form, you cannot. Your observable is derived from a source which does not complete so it cannot itself complete. What you can do is extend this source with a completing condition. This would work like :

var end$ = new Rx.Subject(); var observable = Rx.Observable     .fromEvent(document.getElementById('emitter'), 'click')     .takeUntil(end$); 

When you want to end observable, you do end$.onNext("anything you want here");. That is in the case the ending event is generated by you. If this is another source generating that event (keypress, etc.) then you can directly put an observable derived from that source as an argument of takeUntil.

Documentation:

• http://reactivex.io/documentation/operators/takeuntil.html
• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/takeuntil.md

Answer 2

What worked for me is using the take() operator. It will fire the complete callback after x number of events. So by passing 1, it will complete after the first event.

Typescript:

private preloadImage(url: string): Observable<Event> {     let img = new Image();     let imageSource = Observable.fromEvent(img, "load");      img.src = url;      return imageSource.take(1); }