My goal is to display a spinner on my application while the data is being loaded. To achieve this, I set a variable named IsBusy to True before making the service call, and once the call is complete, I set IsBusy to false.
However, I am facing an issue where the spinner is not being displayed at all in my HTML. Below is the code for both my HTML and TypeScript:
<div id="surgeryRequestFormContainer" class="container-fluid">
<div *ngIf="isBusy" class="loading">
<img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />
</div>
<div class="row">
<div class="form-group col-sm-12">
<button kendoButton (click)="btnPrevious()">Previous</button>
<button kendoButton (click)="btnNext()">Next</button>
<button kendoButton (click)="btnSaveForLater()">Save For Later</button>
</div>
</div>
After researching, I came across a suggestion to import ChangeDetectorRef from '@angular/core'. I followed this advice, instantiated ChangeDetectorRef as cd in my constructor.
ngOnInit(): void {
this.isBusy = true;
console.log("before the subscribe " + this.isBusy);
this.route.params
.switchMap((params: Params) => this._RequestFormService.getRequestById(+params['id']))
.subscribe(
data => this.Model = data,
error => console.log("Error", error),
() => this.isBusy = false);
this.isBusy = false;
console.log(this.isBusy);
this.cd.detectChanges(); // marks path
}
Despite these efforts, I am still unsure of what steps to take to properly show/hide the spinner div tag.