Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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>
over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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.

over 4 years ago · Santiago Trujillo Denunciar

0

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

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda