How to change a mat-progress-bar value in an interval?

Question

I'm using angular 5 and I have a mat-progress-bar. I also have a timer with 2 * 60 value that means 2 minutes. I want to decrease the value of progress-bar each second and after 2 minutes the value of bar become 0! how can I do it?

Hunsinger

Answer 1

You can use the following code as an example.

The component class will look like this:

export class AppComponent {
  progressbarValue = 100;
  curSec: number = 0;

  startTimer(seconds: number) {
    const time = seconds;
    const timer$ = interval(1000);

    const sub = timer$.subscribe((sec) => {
      this.progressbarValue = 100 - sec * 100 / seconds;
      this.curSec = sec;

      if (this.curSec === seconds) {
        sub.unsubscribe();
      }
    });
  }
}

In the template you've the progress bar that uses the value of progressbarValue:

<mat-progress-bar mode="determinate" [value]="progressbarValue"></mat-progress-bar>

And a button to start the startTimer method:

<button mat-raised-button (click)="startTimer(60)">Start timer</button>

You can find a running code example here:

https://stackblitz.com/edit/angular-material-progress-bar-decrease

Volumeter

well, it works in stackblitz but I didn't get everything! what is timer.pipe and what does v do in the map? and how did you calculate progressbarValue? – Hunsinger

The progressbar's value needs to be between 0 and 100. sec * 100 / sec calculates the current percentage. 100 - x% lets the value decrease. Sry, the pipe was not necessary, I updated my answer accordingly. – Volumeter