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

7
votes

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

How can I do that?

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

2 Answers

12
votes

After reading the comments while looking for a solution to my own problem, I was able to come up with the following fix. It's not pretty, but until they open up the color attribute to accept more than three colors, this will serve as a temporary solution.

The spinner is an SVG circle, so it's properties can be modified via CSS. You can change the color of the circle with stroke, and the background of the circle with fill.

In the HTML: 

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

In the CSS:

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

Here is a link to a stackblitz demonstrating it.

EDIT: Thanks to ConquerorsHaki for pointing this out - /deep/, >>> and ::ng-deep have been deprecated. For the moment they still work, and one would hope that a migration script will be provided before they kill it. That said, this is not an optimal solution.

3
votes

Have a look at demo-app example https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

You need to bind to [color] property.

Then in your code you can keep the logic that will change the color dynamically as you need based on your percentage value. e.g:

Template:

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

Function getColor()sample:

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

You need to define the colors in your custom material palette.

UPDATE:

important notice on your '_red_' and '_green_' colors:

The color of the progress-spinner. Can be primary, accent, or warn

As per progress-spinner source code 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;
    }

So getColor() becoming like say:

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

If you not happy with any colors from prebuild theme palettes than you have to create our own, see https://material.angular.io/guides for more details