Angular HttpClient - show spinner/progress indicator while waiting for service to respond - progress events

Question

I\'m switching over my service calls to use the new HttpClient. I\'m struggling with 3 things

1. Figure out how to show a spinner/progress bar/etc while waiting f

Answer 1

I've combined @aravind answer and this post (https://alligator.io/angular/httpclient-intro/) to piece together a solution. This leverages Angular's Http client progress events to turn the spinner on/off and also handles errors.

component:

showSpinner = false;
this.shortFormService.postShortForm(formModel)
  .subscribe(      

    (event: HttpEvent) => {
      console.log(event)
      switch (event.type) {
        case HttpEventType.Sent:
          this.showSpinner = true;
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.UploadProgress:
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log(`File is ${percentDone}% uploaded.`);
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log('