title: How to use <mat-progress-bar> in .ts while calling the API service using angular
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="info_image" *ngIf="profileImage"&gt;
          &lt;ngx-image-zoom
          [fullImage]="profileImage"
          [thumbImage]="profileImage"
          zoomMode='hover'
          &gt;&lt;/ngx-image-zoom&gt;
        &lt;/div&gt;
        &lt;div *ngIf="!profileImage"&gt;
          We couldnot load the image
        &lt;/div&gt;
  Below is the .ts code to fetch image from service:
  
  retrieveProfileImage() {
  this.apiService.fetchProfileImage()
        .then(response =&gt; {
          console.log(response); // this response has the profielImg
          this.profileImage = response.profileImg;
        }).catch((error) =&gt; {
          console.log(error);
  
        });
  
  }
  
  service.ts :
  
  fetchProfileImage(): Promise&lt;any&gt; {
      return this.http
        .post('/auth/profile/retrieveProfileImage',
          new RequestOptions({ headers: headers }))
        .toPromise()
        .then(response =&gt; {  //returns response here,need to set progress bar here until image is fetched 
          return response.json() as any;
        })
        .catch(this.handleError);
    }
  </code></pre>