title: How to handle stream in Angular HTTPClient
body: <p>I have a backend (Spring Boot) API that writes data chunks to the response. I am trying to read that from my Angular code. What I expected was to receive chunks of data from the server. However the <code>get</code> method of <code>httpClient</code> does not return anything till all the data is retrieved from the server. I have given the code below</p>
  <h2>Spring Boot code</h2>
  <pre><code>@GetMapping(value = &quot;/stream&quot;, produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
  public ResponseEntity&lt;StreamingResponseBody&gt; fetchData(@RequestParam String path) {
      try {
          Pair&lt;InputStream, Long&gt; streamAndLen = CommonUtils.getTestStream();
          InputStream stream = streamAndLen.getKey();
          StreamingResponseBody resp =  outputStream -&gt; {
              CommonUtils.copy(stream, outputStream);
              stream.close();
          };
          return ResponseEntity.ok()
              .header(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_TYPE)
              .header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE)
              .contentLength(streamAndLen.getValue())
              .contentType(MediaType.APPLICATION_OCTET_STREAM)
              .body(resp);
      } catch (Exception e) {
          throw new RuntimeException(&quot;Could not get the data for the requested file&quot;, e);
      }
  }
  
  ==============CommonUtils==================
  
  public static Pair&lt;InputStream, Long&gt; getTestStream() {
      File file = new File(&quot;file_path_in_system&quot;);
      try {
          return new Pair&lt;&gt;(new FileInputStream(file), file.length());
      } catch (FileNotFoundException e) {
          e.printStackTrace();
          throw new RuntimeException(&quot;File &quot; + file.getAbsolutePath() + &quot; is not found.&quot;, e);
      }
  }
  
  public static void copy(InputStream stream, OutputStream outputStream) {
      try {
          int buffSize = 1024 * 4;
          byte[] data = new byte[buffSize];
          int length = -1;
          while ((length = stream.read(data)) != -1) {
              outputStream.write(data, 0, length);
              outputStream.flush();
          }
      } catch (IOException e) {
          e.printStackTrace();
      }
  }
  </code></pre>
  <p>The <code>Pair</code> is just a key and value POJO.</p>
  <h2>Angular snippet</h2>
  <pre><code>let headers = new HttpHeaders().set('Accept', 'application/octet-stream');
  this.http.get(env.streamURL + '?path=' + this.filePath, { headers, observe: 'body', reportProgress: true, responseType: 'blob' })
    .pipe(
      map(res =&gt; {
        console.log(res);
      })
    )
    .subscribe(
      (res: any) =&gt; {
        console.log('res = ' + res);
      }
    );
  </code></pre>
  <p>I want to get chunks of data (After every call to <code>flush</code> from the server) in my Angular application rather than waiting for all the chunks. Is there a way it can be achieved?</p>