Angular Mat Progress Spinner Module not updating value

Question

For some reason this thing is not working. I can use it indeterminate mode fine. It shows and spins as it should. But I need to show the user's the value of where it is in the process.

This is my HTML

<mat-progress-spinner *ngIf='ShowLoader'
class="progressSpinner"
[color]="myCustomColor"
[value]="myCustomValue"
[mode]="mode">
</mat-progress-spinner>

My typescript

myCustomColor = 'primary';
mode = 'determinate';
myCustomValue: number = 0;

then on my pageload function just as a test example

pageload() {
    this.ShowLoader = true;

    for (let i = 0; i < 1000; i++) {

       const num = ((i / 1000) * 100);
      setTimeout(() => {
        this.myCustomValue = num;
      }, 500);
    }
}

https://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values — yurzui, Mar 24 '18 at 05:54

score 5 · Accepted Answer · answered Jun 14 '18 at 10:52

5

Get rid of [mode]. use the following :

<mat-progress-spinner *ngIf='ShowLoader'
class="progressSpinner"
[color]="myCustomColor"
[value]="myCustomValue">
</mat-progress-spinner>

answered Jun 14 '18 at 10:52

Tanmoy Bhattacharjee

1,040
11
21

Angular Mat Progress Spinner Module not updating value

1 Answers1