CODEWITHSUNDEEP
angulartypescriptangular-material
mneumann
mneumann

Reputation: 786

Angular loading spinner with [hidden] does not update

I have an Angular material loading spinner in my program that is shown while a REST API is called. When the promise resolves, the visible variable gets set to false and the spinner should disappear.

enter image description here

My problem is that the spinner does not update when it is set to false again. I have to manually trigger a tooltip over a button or something, and only then does the page hide the spinner.

I know for a fact that the variable gets set correctly, but the page does not update the spinner state when it should disappear. Appearing works correctly.

Is the problem that the state is set and unset in the same function?

Here's the template

<div [hidden]="!visible" class="row justify-content-center">
      <mat-spinner></mat-spinner>
</div>

When I click the update button, this.visible = true; is called. Then, an http service gets called:

this.httpService.getData(data).then(receivedData => {
    [...]
    this.visible = false;    // this is called correctly, but does not change the visibility.

But the spinner is still there, together with all the graphs that have been drawn now:

enter image description here

How can I fix this? The spinner should not be visible anymore, but it only disappears after I hover over a button or some other element.

Upvotes: 1

Views: 2569

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10979

You maybe using OnPush Strategy in your component. Inject ChangeDetectorRef and try calling detectChanges method of it.

Upvotes: 1

Related Questions