How do I emit the value of an observable to an rxjs Subject?

Question

I'd like to provide an rxjs Subject from an Angular service to be able to emit values (via next) by calling methods on the service. One of the values I want it to emit is the result of an Angular HttpClient get call. I just can't seem to get it right. I am wondering why the following results in the subscribe handler not being called:

-View

export default abstract class TileView implements OnInit {
  constructor (private configService : ConfigService) {}
  ngOnInit () {
    this.configService.fetch(this.type()).subscribe( res => {
      console.log(res)
    }); 
  }
}

-Service

export class ConfigService {
  public subject = new AsyncSubject();

  constructor (private http : HttpClient) {}

  fetch (type) {
    this.http.get(
      api.host + api.base + interpolate(api.config, { type }) + "/"
    ).subscribe( res => {
      this.subject.next(res);
    });

    return this.subject;
  }
}

Is there any way to return the subject and also fire off the http call with a single method call? It's strange because the subject is returned, a subscriber is registered, the http call completes and this.subject.next(res) is called but the subscribe handler doesn't even run.

Answer 1

Pierre, the reason this happens is because AsyncSubject only emits the last value when the observable completes (determined by Subject.prototype.complete()).

In your case, you'd likely want to use a BehaviorSubject, which emits the last value in the stream, for subscribers regardless of completion:

An AsyncSubject emits the last value (and only the last value) emitted by the source Observable, and only after that source Observable completes. (If the source Observable does not emit any values, the AsyncSubject also completes without emitting any values.)

Subject Documentation

Update:

If you are reluctant to use a BehaviorSubject because of the initial value propagation, use ReplaySubject(1).

Answer 2

complete the observable and it will work

fetch (type) {
    this.http.get(
      api.host + api.base + interpolate(api.config, { type }) + "/"
    ).subscribe( res => {
      this.subject.next(res);
      this.subject.complete();
    });

    return this.subject;
  }

another approach is to use BehaviourSubject, in that case you need to handle null check as BehaviourSubject needs default value

public behaviourSub = new BehaviorSubject(null);

this.configService.fetch(this.type()).subscribe( res => {
    if (res !== null) {
      // actual value emitted
    }
});