My current view only displays a loader.gif and a message to the user. I am looking to enhance the user experience by adding a progress indicator, such as "Processing 1 of 50", during the data update process. The ts class interacts with a data service layer responsible for updating the database, and I want to provide real-time feedback to the UI at regular intervals.
View
<div class="modal-body" *ngIf="updateVersionItemsInProgress">
<div *ngIf="updateVersionItemsInProgress">
<img src="/Content/images/ajax-loader.gif" /><span>Updating templates...</span>
</div>
<label class="col-sm-3 control-label">
Processing {{currentitem}} of {{items.length}}
</label>
</div>
ts file
private updateItems() {
let versionKeys = this.items.map(i => i.VersionKey);
this.updateVersionItemsInProgress = true;
this.templatesManagementService.updateToNewVersion(versionKeys)
}