How to bind md-progress-spinner color in Angular 2 Material 2, to custom color?

Question

I want to use md-progress-spinner to display the percentage of work done, but I want to change its stroke color from red to green dynamically based on the percentage.

How can i do this?

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [style.background]="today?.MemorizationStateColor">
</md-progress-spinner>

Answer 1

After reading the comments when looking for a solution to my own problem, I was able to come up with the following fix. This is not very, but until they open the color attribute to accept more than three colors, this will be a temporary solution.

Spinner - SVG-, CSS. .

HTML:

<mat-spinner class="very-pink"></mat-spinner>

CSS:

.very-pink::ng-deep circle {
  stroke: fuchsia;
}

stackblitz, .

Answer 2

demo-app https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

[color].

, , , . :

:

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [color]="getColor(today?.MemorizationPercent)">
</md-progress-spinner>

getColor() sample:

getColor(percentage) {
   return percentage > 50 ? '_red_' : '_green_';
}

.

UPDATE:

'_red_' '_green_':

. ,

progress-spinner https://github.com/angular/material2/blob/master/src/lib/progress-spinner/progress-spinner.ts#L110

/** The color of the progress-spinner. Can be primary, accent, or warn. */
  @Input()
  get color(): string { return this._color; }
  set color(value: string) {
    if (value) {
      this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
      this._renderer.addClass(this._elementRef.nativeElement, `mat-${value}`);
      this._color = value;
    }

, getColor() :

getColor(percentage) {
   return percentage > 50 ? 'accent' : 'warn';
}

- prebuild, , . https://material.angular.io/guides