search

crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
742 stars 173 forks source link

Switching color for particular sections #123

Open cbruce11 opened 7 years ago

cbruce11 commented 7 years ago

Is there anyway to have the progress bar change for a certain section of the circle? Say the max is 100 and 30-45 is red while the rest of the circle is green

domske commented 7 years ago

You can use the onRender-Method to do this. Use $event as current progress value (argument) and a variable for the color. Like:

HML

<round-progress 
  [current]="progressValue" 
  [max]="100" 
  [color]="progressColor"  
  (onRender)="progressRender($event)"
></round-progress>

TypeScript

  progressRender(progress: number) {

    if ((progress < 10) || (progress > 90)) {
      this.progressColor = "#f53d3d";
    } else {
      this.progressColor = "#32db64";
    }
  }
cbabu7777 commented 5 years ago

@domske it is not working

cbabu7777 commented 5 years ago

can you explain it clearly