The mat spinner doesn't hide after changing the control property

Question

<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
  <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
</mat-card>

loadData(filters: MultipleExpenseFilterRequest) {
    this.isLoading = true;
    this.taskService.getAllTasks().subscribe(taskData => {
      this.taskList = taskData;
      this.expensesService.getAllExpensesTypes().subscribe(expensesTypeData => {
        this.expensesTypeList = expensesTypeData;
        this.expensesService.getAllCurrencyType().subscribe(currencyData => {
          this.currencyList = currencyData;
          this.initializeExpenses();
        });
      });
    });
  }

  initializeExpenses() {
    this.expensesService.getAllExpenses(11, 2019).subscribe(data => {
      this.isLoading = false;
      this.expenses.data = data;
    });
  }

Changing the value of the control property for the mat-spinner (isLoading) doesn't hide the mat-spinner. The spinner is hidden only when clicking or moving the mouse over it.

This happens when the datasource.data of the table that I am using is empty. So I get no data from the server.

Answer 1

Try *ngIf="isLoading == true" to specify the state of the boolean. *ngIf="isLoading" would refer to anything as long as the boolean is defined.

Answer 2

Assign false to isLoading if error happens to the API, and also use ChangeDetectorRef :

constructor(private cd: ChangeDetectorRef) {
}

initializeExpenses() {
    this.expensesService.getAllExpenses(11, 2019).subscribe(data => {
      this.isLoading = false;
      this.expenses.data = data;
      this.cd.detectChanges();
    }, error => {
       this.isLoading = false;
       this.cd.detectChanges();
    });
}

You also need to use the error part for the first three API calls. The spinner would stay if the error happens because it does not reach the initializeExpenses() .