I'm currently utilizing an API call to retrieve an image from a service, and I would like to display a progress bar while the image is being fetched. It seems that I need to incorporate the progress bar within the service as the image data is returned by the response. How can I implement this in my scenario? Any assistance on this matter would be greatly appreciated. Thank you.
HTML:
<div class="info_image" *ngIf="profileImage">
<ngx-image-zoom
[fullImage]="profileImage"
[thumbImage]="profileImage"
zoomMode='hover'
></ngx-image-zoom>
</div>
<div *ngIf="!profileImage">
We could not 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 contains the profileImg
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);
}