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

Create a spinner component using the below code

import { Component, Input } from '@angular/core';

@Component({
    selector: 'spinner',
    template:
    ` 

          
      
    `
})
export class SpinnerComponent {
    @Input() size: number = 25;
    @Input() show: boolean;


}

In your main component, add the component markup as below

In your typescript code

this.applicationFormService.putForm(formModel)    
  .subscribe(data=>{
        ....
       // hide the spinner
       this.showSpinner = false;

    }(err: HttpErrorResponse) => {
       this.showSpinner = false;          
    })

show the spinner where you are making the service call, for example onInit of the component

ngOnInit(){
   this.showSpinner = true;
   ...service call logics...
}

LIVE DEMO