Skip to main content

angular material - How to use query Progress bar

app.component.ts 

import { Component } from '@angular/core';
import { ProgressBarMode } from '@angular/material/progress-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isDisabled:boolean = false;
  progress:number = 0;
  timer:any;
  maxValue:number = 25;
  percentage:number = 0;
  bufferProgress:number = 0;

  progressBarMode:ProgressBarMode = "query";

  onClick(){
    this.progress = 0;
    this.isDisabled = true;
    this.delay().then(
      () => {
        setInterval(() => this.updateProgress(), 1000)
        this.progressBarMode = "determinate"
      }
    )
  }

  updateProgress(){
    this.progress++
    if(this.progress>=this.maxValue){
      clearInterval(this.timer);
      this.isDisabled = false;
    }
    this.calculatePercentage()
  }

  calculatePercentage(){
    //this.percentage = Math.round((this.progress / this.maxValue) * 100);
    //this.percentage = Math.ceil((this.progress / this.maxValue) * 100);
    this.percentage = Math.floor((this.progress / this.maxValue) * 100);
  }

  delay() {
    return new Promise(resolve => setTimeout(resolve, 5000));
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to use query Progress bar
</h2>


<button 
    mat-raised-button
    color="accent"
    (click)="onClick()" 
    [disabled]="isDisabled" 
    style="margin-bottom:25px;">
        Run {{maxValue}} Tasks
</button>


<h3>
    {{
        'Task ' + progress + ' of ' + maxValue + ' done.'
        + ' ( '+ percentage + '% done. )'
    }}
</h3>

<h3>{{'Progress bar mode : ' + progressBarMode}}</h3>


<mat-progress-bar 
    [mode]="progressBarMode" 
    [value]="percentage"
    *ngIf="(isDisabled && progressBarMode =='query')
     || (isDisabled || progressBarMode =='determinate')">
</mat-progress-bar>
app.module.ts [import] 

import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatButtonModule} from '@angular/material/button'
More Angular tutorials
Labels: