How to use <mat-progress-bar> in .ts while calling the API service using angular

问题

I am using a API call to fetch the image from service and I would like to use a progress bar until the image is fetched. Probably I need to set the progress bar in service as the image is returned from service response. How to use for this scenario. Any help on this is much appreciated. Thanks.

HTML:

<div class="info_image" *ngIf="profileImage">
        <ngx-image-zoom
        [fullImage]="profileImage"
        [thumbImage]="profileImage"
        zoomMode='hover'
        ></ngx-image-zoom>
      </div>
      <div *ngIf="!profileImage">
        We couldnot load the image
      </div>
Below is the .ts code to fetch image from service:

retrieveProfileImage() {
this.apiService.fetchProfileImage()
      .then(response => {
        console.log(response); // this response has the profielImg
        this.profileImage = response.profileImg;
      }).catch((error) => {
        console.log(error);

      });

}

service.ts :

fetchProfileImage(): Promise<any> {
    return this.http
      .post('/auth/profile/retrieveProfileImage',
        new RequestOptions({ headers: headers }))
      .toPromise()
      .then(response => {  //returns response here,need to set progress bar here until image is fetched 
        return response.json() as any;
      })
      .catch(this.handleError);
  }

回答1:

You can use a boolean value to show a progress bar. Add a boolean to show spinner at start of the method and at end make it to false.

getAllPlaybooks() {
    this.displaySpinner = true;
    //First get all playbooks and use first playbook as id for default sidedrawer
    this.keypointService.getAllPlaybooksOfACustomer().subscribe((res: any) => {
      this.totalPlaybooks = res;
    }, err => {
      this.displaySpinner = false;
      this.toasterService.showFailure('Sorry something went wrong');
    }, () => {
      this.displaySpinner = false;
    });   }

来源：https://stackoverflow.com/questions/59855216/how-to-use-mat-progress-bar-in-ts-while-calling-the-api-service-using-angular