CODEWITHSUNDEEP
angularangular-material
Alex
Alex

Reputation: 375

mat-progress-bar updating in real time

Updated only after page reload. Is it possible to update the progress bar in real time?

<mat-progress-bar
  *ngIf="row.stage === 'importing_in_progress'"
  class="exchange-files__progress-bar"
  mode="determinate"
  [value]="row.progress"
></mat-progress-bar>

Upvotes: 0

Views: 921

Answers (1)

J&#248;rgen
J&#248;rgen

Reputation: 360

Make sure the value you pass to the [value] attribute is updated in a way so angular change detection will pick it up. One way is to use an observable

const progress = of([1,3,4]).pipe(delay(1000));

and pass it to mat-progress-bar with the async pipe.

<mat-progress-bar
 ...
 [value]="progress | async"
></mat-progress-bar>

This should make the progress bar update in real-time.

Upvotes: 1

Related Questions