Skip to main content

angular material - Show custom color in Progress bar

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    /deep/ .mat-progress-bar-fill::after {
      background-color: Purple;
    }

    /deep/ .mat-progress-bar-buffer {
      background: Thistle;
    }
  `]
})


export class AppComponent {
  isDisable:boolean = false;
  progress:number = 0;
  timer:any;
  maxValue:number = 100;

  onClick(){
    this.progress = 0;
    this.isDisable = true;
    this.timer = setInterval(() => this.updateProgress(), 100)
  }

  updateProgress(){
    this.progress++
    if(this.progress>=this.maxValue){
      clearInterval(this.timer);
      this.isDisable = false;
    }
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - Show custom color in Progress bar
</h2>


<button 
    mat-raised-button 
    color="primary"
    (click)="onClick()" 
    [disabled]="isDisable" 
    style="margin-bottom:30px;">
        Run Task
</button>

<h3>Progress : {{progress}}</h3>

<mat-progress-bar
    mode="determinate" 
    [value]="progress">
</mat-progress-bar>
app.module.ts [import] 

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