title: In Angular using Observable to respond to an api request and then push any changes to the controller
body: <p>I'm currently using angular 5, but this is more just a general RxJs question. I want to be able to respond to a controller's request for an api's data with the data, but then also push changes anytime the value becomes stale. I'm currently trying to achieve this using multicasting, but that doesn't seem right since only the initial value is received. </p>
  
  <pre><code>export class EditorService {
    private getSubject = new Subject&lt;null&gt;();
  
    onLanguageChange() {
      // currentLanguage is a model so will be updated by angular
      this.getSubject.next();
    }
  
    get(): Observable&lt;DeltaStatic&gt; {
      const get = () =&gt; {
        return this.http.get&lt;BackEndResponse&lt;MasterBlob&lt;DeltaStatic|string&gt;&gt;&gt;(
          `${backendEndPoint}/get-all`,
        ).pipe(
          map(blob =&gt; blob.data[this.currentLanguage][this.currentKey].quillBlob)
        );
      };
  
      return get().pipe(
        multicast(this.getSubject),
        refCount(),
        switchMap(get),
      );
    }
  }
  </code></pre>
  
  <p>The other option, which feels slightly more idiomatic, is to just use a subject with switchMap, but I don't want to have to trigger next from the controller to get the first value after I subscribe:</p>
  
  <pre><code>export class EditorService {
    private getSubject = new Subject&lt;null&gt;();
  
    onLanguageChange() {
      // currentLanguage is a model so will be updated by angular
      this.getSubject.next();
    }
  
    get(): Observable&lt;DeltaStatic&gt; {
      const get = () =&gt; {
        return this.http.get&lt;BackEndResponse&lt;MasterBlob&lt;DeltaStatic|string&gt;&gt;&gt;(
          `${backendEndPoint}/get-all`,
        ).pipe(
          map(blob =&gt; blob.data[this.currentLanguage][this.currentKey].quillBlob)
        );
      };
  
      return this.getSubject.pipe(
        switchMap(get),
      );
    }
  }
  
  @Component({
    selector: 'editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.scss']
  })
  export class EditorComponent implements AfterViewInit {
    constructor(private editorService: EditorService) {}
  
    ngAfterViewInit() {
        this.editorService.get().subscribe(data =&gt; {...});
      this.editorService.getSubject.next();
    }
  }
  </code></pre>
  
  <p>Finally I toyed with my go to solution of using a ReplaySubject, but that requires me to subscribe to the initial Observable in the service which goes against the best practice of waiting to make the call until the controller needs something and calls subscribe. I also feel like I always just resort to ReplaySubject since it is the most hackable, but there has to be a better way to achieve this. </p>