title: Angular HttpClient - show spinner/progress indicator while waiting for service to respond - progress events
body: <p>I'm switching over my service calls to use the new HttpClient. I'm struggling with 3 things</p>
  
  <ol>
  <li>Figure out how to show a spinner/progress bar/etc while waiting
  for a response from a post, get, put.  </li>
  <li>Fake a slow response</li>
  <li>Is it possible to use the new progress events to trigger this sort of functionality? </li>
  </ol>
  
  <p>application.component.ts</p>
  
  <pre><code> this.applicationFormService.putForm(formModel)    
    .subscribe(
      // Successful responses call the first callback.
      (res) =&gt; this.goToRoute(res),
      // Errors will call this callback instead:
      (err: HttpErrorResponse) =&gt; {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      },
      //Tried adding progress event logic here but I get error Argument of type '(event: any) =&gt; void' is not assignable to parameter of type '() =&gt; void'. Is this totally the wrong implementation and can it even be used for showing progress?
      event =&gt; {
        // Via this API, you get access to the raw event stream.
        // Look for upload progress events.
        if (event.type === HttpEventType.UploadProgress) {
          // This is an upload progress event.
        } else if (event instanceof HttpResponse) {
  
        }
      }
    )
  </code></pre>
  
  <p>application.service.ts</p>
  
  <pre><code>constructor (private httpNew: HttpClient){}
  putForm(applicationForm:any){
   this.applicationId = this.id.id
   const req = new HttpRequest('PUT', this.applicationSubmitUrl+this.applicationId, applicationForm, {
    reportProgress: true,
   });
  return this.httpNew.request(req)
  }
  </code></pre>